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

Question

假设我有

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

我想放一个背景图像并给它一个不透明度为0.5-但我想要我写的文本有完全的不透明度(1)。

如果我像这样编写CSS

.myDiv { opacity:0.5 }

所有的东西都是低透明度的--我不想那样。

所以我的问题是--我怎样才能获得低不透明度背景图像与全不透明度文本？

Answer 1

不，这是做不到的，因为opacity会影响整个元素，包括其内容，而且没有办法改变这个行为。您可以使用以下两种方法来解决这一问题。

向容器中添加另一个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%;
}

请参阅jsFiddle上的测试用例

另一个技巧是使用CSS 2.1:before或CSS 3::before伪元素。从版本8开始的IE支持:Before伪元素，而根本不支持::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索引，并为背景图像设置负的z-index。

请参阅JSFiddle上的测试用例：

• 使用CSS 2.1:之前
• 使用CSS 3::before