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

假设我有

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

我想放置一个background-image并给它一个opacity的0.5-但我希望我编写的文本具有完全的不透明度(1)。

如果我这样写CSS

.myDiv { opacity:0.5 }

所有都将处于低不透明度状态-我不希望这样。

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

最佳答案

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

中学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%;
}

参见test case on jsFiddle

:before和:: before伪元素

另一个技巧是使用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-index以及为背景图像设置一个负的z-index。

测试用例

请参阅jsFiddle上的测试用例:

Using CSS 2.1 :before

Using CSS 3 ::before

关于html - 我可以仅对div的背景图像设置不透明度吗？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/7241341/