css背景图片透明度不影响文字

在CSS中，可以使用`opacity`属性来控制元素及其内容的透明度。然而，这个属性会同时影响背景图片和文本内容的透明度，因此无法单独控制背景图片的透明度而不影响文字。

不过，还有其他方法可以实现只调整背景图片的透明度而不影响文字的显示。其中一个方法是使用CSS伪元素`::before`或`::after`来添加一个额外的层，并将背景图片应用到该层上，然后通过设置该层的透明度来单独控制背景图片的透明度。

下面是一个示例代码：

HTML:

<div class="container">
  <h1>Hello, World!</h1>
</div>

CSS:

.container {
  position: relative;
}

.container::before {
  content: "";
  background-image: url('bg.jpg'); /* 设置背景图片的路径 */
  opacity: 0.5; /* 设置背景图片的透明度 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1; /* 将背景图片层级设置为在内容之下 */
}

h1 {
  color: #000000; /* 设置文字颜色 */
}

通过上述代码，我们在`.container`容器中使用`::before`伪元素添加了一个背景图片层，并通过`opacity`属性将其透明度设置为0.5。这样就能实现只改变背景图片的透明度而不会影响文字的显示。

需要注意的是，这种方法只适用于固定背景图片的情况，如果需要动态更改背景图片的透明度，则需要使用JavaScript来实现。