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

Question

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

让我说我有

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

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

如果我像这样写CSS

.myDiv { opacity:0.5 }

一切都将是低透明度 - 我不希望这样。

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

Answer 1

不，这不能做，因为opacity影响整个元素，包括其内容，并没有办法改变这种行为。您可以使用以下两种方法解决此问题。次要divdiv向容器添加另一个元素以保存背景。这是最友好的跨浏览器方法，甚至可以在IE6上运行。HTML<div&nbsp;class="myDiv"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="bg"></div> &nbsp;&nbsp;&nbsp;&nbsp;Hi&nbsp;there</div>CSS.myDiv&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1;}.myDiv&nbsp;.bg&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;-1; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;url(test.jpg)&nbsp;center&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;.4; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;100%; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;100%;}请参阅jsFiddle上的测试用例：before和::之前的伪元素另一个技巧是使用CSS 2.1&nbsp;:before或CSS 3&nbsp;::before伪元素。:beforeIE版本8支持伪元素，而::before根本不支持伪元素。这有望在第10版中得到纠正。HTML<div&nbsp;class="myDiv"> &nbsp;&nbsp;&nbsp;&nbsp;Hi&nbsp;there</div>CSS.myDiv&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;1;}.myDiv:before&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;-1; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;url(test.jpg)&nbsp;center&nbsp;center; &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;.4;}补充说明由于您的行为，z-index您必须为容器设置z-index以及为z-index背景图像设置负数。测试用例请参阅jsFiddle上的测试用例：使用CSS 2.1：之前使用CSS 3 ::之前

Answer 2

所以这是另一种方式：background-image:&nbsp;linear-gradient(rgba(255,255,255,0.5),&nbsp;rgba(255,255,255,0.5)),&nbsp;url("your_image.png");

Answer 3

CSSdiv&nbsp;{&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;200px; &nbsp;&nbsp;&nbsp;&nbsp;height:&nbsp;200px; &nbsp;&nbsp;&nbsp;&nbsp;display:&nbsp;block; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;relative;}div::after&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;content:&nbsp;""; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;url(image.jpg);&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;opacity:&nbsp;0.5; &nbsp;&nbsp;&nbsp;&nbsp;top:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;left:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;bottom:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;right:&nbsp;0; &nbsp;&nbsp;&nbsp;&nbsp;position:&nbsp;absolute; &nbsp;&nbsp;&nbsp;&nbsp;z-index:&nbsp;-1;}HTML<div>&nbsp;put&nbsp;your&nbsp;div&nbsp;content</div>