
如何在 css 中设置背景图片的透明度?
问题描述:如何使用 CSS 设置背景图片的透明度而不会影响文字的可见度?代码示例如下:
文字要清晰可见
网上流行的做法是使用 background-color: rgba(255, 255, 255, 0.5);,但实际上并没有效果。
解决方案:
使用伪元素代替背景层:
立即学习“前端免费学习笔记(深入)”;
.warp {
position: relative;
}
.warp:before {
position: absolute;
content: "";
opacity: 0.6; /* 透明度 */
background-image: url('xxxx');
top: 0;
left: 0;
right: 0;
bottom: 0;
}










