透明背景图片：揭开 css 谜团
问题：
如何使用 css 为背景图片设置透明度？代码尝试使用 background-color: rgba(255, 255, 255, 0.5); 却无法奏效。
解决方案：
立即学习“前端免费学习笔记（深入）”；
尽管 background-color 可以为背景颜色设置透明度，但它不会影响背景图片。相反，可以使用伪元素来创建一个覆盖背景的透明层。
伪元素解决方法：
- 创建一个具有 position: relative; 的容器元素。
- 在容器元素内添加一个伪元素（例如：::before）。
- 为伪元素设置 position: absolute;，将其覆盖在容器元素之上。
- 使用 content: ""; 将伪元素设置为空内容。
- 设置伪元素的透明度（例如：opacity: 0.6;）。
- 将背景图像分配给伪元素（例如：background-image: url('xxxx');）。
- 将伪元素的 top、left、right 和 bottom 设置为 0，使其覆盖整个容器。
代码示例：
<div class="wrap"></div>
.wrap {
position: relative;
}
.wrap::before {
position: absolute;
content: "";
opacity: 0.6;
background-image: url('xxxx');
top: 0;
left: 0;
right: 0;
bottom: 0;
}现在，背景图片将拥有透明度，而容器内的文字仍然清晰可见。这种方法对于创建带有半透明背景图片的视觉元素非常有用。
