CSS 设置背景图片的透明度但不影响文本

在本文中，我们将介绍如何使用 CSS 设置背景图片的透明度，同时保持文本的不透明性。在某些情况下，我们可能希望通过改变背景图片的透明度来实现特殊效果，但是又不希望影响到文本的可读性。下面我们将介绍两种常见的方法来实现这个效果。

阅读更多：CSS 教程

方法一：使用伪元素

第一种方法是使用伪元素来作为背景图层，这样我们可以单独控制它的透明度，而不会影响到文本的不透明性。

<div class="container">
  <div class="background"></div>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id risus lectus.</p>
</div>

.container {
  position: relative;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("background.jpg");
  opacity: 0.7;
}

p {
  position: relative;
  z-index: 1;
}

在这个例子中，我们首先创建了一个包含文本和背景图层的容器。背景图层使用了绝对定位，并且覆盖在文本之上。通过设置背景图层的透明度为0.7，我们实现了背景图层的半透明效果。同时，通过在文本元素上设置一个相对定位，并将其z-index设置为1，我们保证文本在背景图层之上，不会受到背景图层透明度的影响。

方法二：使用透明背景色

第二种方法是通过设置背景色的透明度，而不是背景图片的透明度，来实现和文本分离的效果。

<div class="container">
  <p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id risus lectus.</p>
</div>

.container {
  background-image: url("background.jpg");
  background-size: cover;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 20px;
}

.text {
  color: white;
}

在这个例子中，我们设置了容器的背景图片，并使用rgba颜色模式设置了背景色的透明度为0.7。同时，我们给文本元素设置了白色的颜色，以便与半透明背景进行对比。通过这种方式，我们同样实现了背景图层和文本的分离效果。