html - 将不透明度应用于背景图像而不是文本

Question

我的问题是，当我让图片变暗时，类 .text 中的文本也会变暗，我不知道如何避免这种情况。

我知道一个解决方案:让 .wrap position:absolute 和 class .text make not in image 但此解决方案不适合我(如 this )。

还有其他想法吗？

这是我的代码:

.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  opacity: 0.8;
  height: 100vh;
  max-height: 350px;
  min-height: 200px;
}
.text {
  color: #FFF;
  font-weight: 900;
}

<div class="wrap">
  <div class="image">
    <div class="text">
      <p>I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE
        YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU I LOVE YOU</p>
    </div>
  </div>
</div>

jsfiddle demo

Answer 1

opacity 不是 inherit 属性，但会影响内容，因此当您增加 .image 的不透明度时，也会影响 .text，你可以使用伪元素和background: rgba()来达到你想要的效果:

这里是工作 JSFiddle一起玩

.wrap {
    width: 100%;
}
.image {
    background-image: url("/image/gijdH.jpg?s=328&g=1");
    position: relative;
    height: 100vh;
}
.image:before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0,0,0,0.7);
}
.text {
    color: #FFF;
    position: relative;
}

<div class="wrap">
    <div class="image">
        <div class="text">
            <p>I LOVE YOU</p>
        </div>
    </div>
</div>