我可以仅对div的背景图像设置不透明度吗？

Question

假设我有

<div class="myDiv">Hi there</div>

我想提出一个background-image并给它一个opacity的0.5-但我想，我写的文字将有充分的不透明度（1）。

如果我这样写CSS

.myDiv { opacity:0.5 }

一切 都会变得不透明-我不想要那样。

所以我的问题是–如何获得带有完全不透明度文本的低不透明度背景图像？

Answer 1

不，这无法完成，因为opacity会影响整个元素（包括其内容），并且无法更改此行为。您可以使用以下两种方法解决此问题。

Secondary div

将另一个div元素添加到容器中以保留背景。这是跨浏览器最友好的方法，即使在IE6上也可以使用。

的HTML

<div class="myDiv">
    <div class="bg"></div>
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv .bg {
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
    width: 100%;
    height: 100%;
}

：before和:: before伪元素

另一个技巧是使用CSS 2.1 :before或CSS3::before伪元素。:beforeIE从版本8开始支持伪元素，而::before完全不支持伪元素。希望它将在版本10中得到纠正。

HTML

<div class="myDiv">
    Hi there
</div>

CSS

.myDiv {
    position: relative;
    z-index: 1;
}

.myDiv:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: url(test.jpg) center center;
    opacity: .4;
}

补充笔记

由于您的行为，z-index您将必须为容器设置z-index以及为z-index背景图像设置负值。