纯css实现背景图片半透明内容不透明的方法

下面是一份关于“纯css实现背景图片半透明内容不透明的方法”的攻略。

什么是背景图片半透明内容不透明的效果

这种效果指的是，在一个元素的背景图片是半透明状态时，元素内部的内容又是不透明状态。这种效果经常用于制作大图背景，同时又需要让内容不受图片透明度影响时非常实用。下面就是一些实现这种效果的方式。

方式一：使用伪类元素

这种方式的实现思路是在元素之中插入一个伪类元素，用伪类元素作为背景遮罩，并设置伪类元素的透明度，达到半透明背景的效果。然后将实际的内容用z-index属性设置到伪类元素之上，使内容不受伪类元素透明度的影响。

<div class="bg-image">
    <div class="content">
        <h2>这是标题</h2>
        <p>这是一段正文</p>
    </div>
</div>

.bg-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: url("your-image");
  background-position: center;
  background-size: cover;
}

.bg-image:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  background-color: #000;
  opacity: 0.5;
}

.content {
  position: relative;
  z-index: 1;
  color: #fff;
  /* 其他样式 */
}

在上面的示例代码中，我们首先将元素.bg-image设置为relative定位，然后设置背景图片。接着，我们使用:before伪类元素来创建一个背景遮罩层，并将透明度设置为0.5，达到半透明效果。最后，我们将z-index属性设置为1的元素.content，放置在遮罩层之上，并设置它的颜色为白色。

方式二：使用背景gradient

除了伪类元素，另一种方法是利用CSS3的gradient属性来实现，和方式一相比，方法更简洁。 不过要注意的是背景gradient要写两遍，保证浏览器兼容性。

<div class="bg-image">
    <div class="content">
        <h2>这是标题</h2>
        <p>这是一段正文</p>
    </div>
</div>

.bg-image {
  position: relative;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0.5) 0%,rgba(0,0,0,0.5) 100%), url("your-image");
  background-position: center;
  background-size: cover;
}

.content {
  position: relative;
  z-index: 1;
  color: #fff;
  /* 其他样式 */
}

在上面的示例代码中，我们在.bg-image元素中使用background-image属性，先设置了一个渐变的透明背景，再设置了背景图片。其中，linear-gradient函数指定了透明背景，rgba(0,0,0,0.5)表示黑色背景的透明度为50%。然后在.content中，我们也添加了z-index属性将它放到透明背景上面。

通过这两种方法，你也可以实现一个优秀的“纯css实现背景图片半透明内容不透明的效果”。