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

Question

我的问题是，当我将图片调暗时，class .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 应用于整个元素（包括内容）。

因此，因为 div.text 嵌套在 div.image 中，所以应用于 div.image 的 opacity 也适用于所有后代。

使用背景颜色，您可以将不透明度直接应用到属性和 rgba():

background-color: rgba(255, 0, 0, 0.6);

... 就避免了你问题中提出的问题。

但是，对于背景图片，需要一个解决方法。

选项包括为图像创建单独的 div 或使用伪元素。

此处详细介绍了这些选项和其他一些选项：

Can I set an opacity only to the background image of a div?
CSS: set background image with opacity?

Answer 2

您始终可以应用 webkit 过滤器使文本更亮

http://jsfiddle.net/RachGal/qxtwckts/ or the following snippet http://jsfiddle.net/RachGal/qxtwckts/1/

#wrap {
  position: relative;
  float: left;
  background-image: url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.9;
  height: 400px;
  width: 400px;
}
#wrap:after {
  content: '';
  display: block;
  position: absolute;
  z-index: 2;
}
p {
  font-size: 1em;
  color: white;
  text-align: left;
}
}

<div id="wrap">




  <div id="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>

Answer 3

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

这里有一个可用的JSFiddle可以玩

.wrap {
    width: 100%;
}
.image {
    background-image: url("https://i.stack.imgur.com/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>

Answer 4

opacity 应用于整个 div 而不是使用 linear-gradient()

淡化图像而不是 div

.wrap {
  width: 100%;
  background: #000 none repeat scroll 0% 0%;
}
.image {
  background-image:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.6)), url("https://pbs.twimg.com/profile_banners/1550273796/1372363601/1500x500");
  background-size: cover;
  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>

Answer 5

<div class="background-image">
   <div id="text-color">
      Hello!!
   </div>
</div>

.background-image {
  background-image: url(image.jpg);
  background-size:cover;
  background-position:center;
  color:#fff;
  background-repeat: no-repeat;
}

.text-color { 
 background-color: rgba(255, 0, 0, 0.6);
}

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

Apply opacity to background image but not text

html

css

opacity