不,这无法完成,因为
opacity会影响整个元素(包括其内容),并且无法更改此行为。您可以使用以下两种方法解决此问题。
Secondary div
将另一个
div元素添加到容器中以保留背景。这是跨浏览器最友好的方法,即使在IE6上也可以使用。
的HTML
<div > <div ></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 > 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背景图像设置负值。



