我正在使用与以下代码类似的东西。
<div style="opacity:0.4; background-image:url(...);">
<div style="opacity:1.0;">
Text
</div>
</div>
我希望这能使背景的不透明度为0.4,文字的不透明度为100%。相反,它们都有0.4的不透明度。
孩子们继承了不透明性。如果他们不这样做,就会很奇怪,也很不方便。
你可以使用一个半透明的PNG文件作为你的背景图片,或者使用一个RGBa(a代表alpha)颜色作为你的背景颜色。
例如,50%褪色的黑色背景。
<div style="background-color:rgba(0, 0, 0, 0.5);">
<div>
Text added.
</div>
</div>
我会做这样的事情
<div class="container">
<div class="text">
<p>text yay!</p>
</div>
</div>
CSS。
.container {
position: relative;
}
.container::before {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: url('/path/to/image.png');
opacity: .4;
content: "";
z-index: -1;
}
它应该可以工作。这是假设你需要有一个半透明的图像,而不是一个颜色(你应该使用rgba)。还有一个假设是,你不能在Photoshop中事先改变图像的不透明度。
这是因为内层 div 的不透明度为其所嵌套的 div 的 100%(后者的不透明度为 40%)。
为了规避它,你可以做几件事。
你可以像这样创建两个独立的div。
<div id="background"></div>
<div id="bContent"></div>
为背景设置你想要的CSS不透明度和其他属性,并使用z-index属性(z-index)来设计和定位bContent div。有了这个方法,你就可以把这个div放在背景div的上方,而不会让它的不透明度受到影响。
另一个选择是RGBa。这将允许您嵌套您的div,并仍然实现div的特定不透明度。
最后一个选择是简单地在你所选择的图像编辑器中制作一个你想要的颜色的半透明.png图像,将背景-图像属性设置为图像的URL,然后你就不必担心对CSS进行修改而失去嵌套div结构的能力和组织。