Html 将不透明度应用于背景图像但不应用于文本
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32490798/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Apply opacity to background image but not text
提问by Qwe
My problem is when I make my picture darker the text in class .textgets darker too, and I don't know how to avoid this.
我的问题是，当我将图片变暗时，课堂上的文字.text也会变暗，我不知道如何避免这种情况。
I know one solution: to make .wrapposition:absoluteand class .textmake not in imagebut this solution is unsuitable for me (like this).
我知道一个解决方案： make.wrapposition:absolute和 class .textmake not inimage但这个解决方案不适合我（像这样）。
Any other ideas?
还有其他想法吗？
This is the code that I have:
这是我拥有的代码：
.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>回答by Yandy_Viera
opacityis not an inheritproperty but affect the content so when you increase the opacity of .imagethat also affects to .text, you can use pseudo elements and background: rgba()to achieve what you want like this:
opacity不是inherit属性但会影响内容，因此当您增加不透明度.image也会影响到 时.text，您可以使用伪元素并background: rgba()实现您想要的效果，如下所示：
Here a working JSFiddleto play with
这里有一个可以使用的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>回答by Michael Benjamin
opacityis applied to the entire element (including the content).
opacity应用于整个元素（包括内容）。
Therefore, because div.textis nested in div.image, the opacityapplied to div.imageapplies to all descendants, as well.
因此，因为div.text嵌套在 中div.image，所以opacity应用于也div.image适用于所有后代。
With background colors you could apply the opacity directly to the property with rgba():
使用背景颜色，您可以使用以下命令将不透明度直接应用于属性rgba()：
background-color: rgba(255, 0, 0, 0.6);
... and the problem raised in your question is avoided.
...并且避免了您问题中提出的问题。
However, with background images a workaround is needed.
但是，对于背景图像，需要一种解决方法。
Options include creating a separate divfor the image or using a pseudo-element.
选项包括div为图像创建单独的图像或使用伪元素。
These options and a few others are detailed here:
这些选项和其他一些选项在此处详细说明：
回答by Rachel Gallen
you could always apply webkit filters to make the text brighter
你总是可以应用 webkit 过滤器来使文本更亮
http://jsfiddle.net/RachGal/qxtwckts/or the following snippet http://jsfiddle.net/RachGal/qxtwckts/1/
http://jsfiddle.net/RachGal/qxtwckts/或以下代码段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>回答by Jose Hatikva
<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);
}
回答by kooskoos
opacityis applied to the entire div rather fade the image instead of div using linear-gradient()
opacity应用于整个 div 而不是淡化图像而不是 div 使用linear-gradient()
.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>