如何使用 CSS 伪元素设置背景图片透明度？

背景图片透明度设置

如何使用 css 设置背景图片的透明度，使其背后的文字清晰可见？

虽然尝试了 background-color: rgba(255, 255, 255, 0.5); 但效果不显。

解决方案

可以使用伪元素代替背景层来实现：

<div class="wrap"></div>

.warp {
  position: relative;
}

.warp:before {
  position: absolute;
  content: "";
  opacity: 0.6; /* 透明度 */
  background-image: url('xxxx');
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

通过设置伪元素的 opacity 属性，可以控制背景图片的透明度，让背后的文字清晰可见。