CSS背景不透明度

Question

我正在使用类似于以下代码的内容：

<div style="opacity:0.4; background-image:url(...);">

    <div style="opacity:1.0;">

        Text

    </div>

</div>

我希望这可以使背景的不透明度为0.4，文本的不透明度为100％。相反，它们都具有0.4的不透明度。

Answer 1

儿童会遗传不透明度。如果他们不这样做，那将会很奇怪和不便。您可以为背景图像使用半透明的PNG文件，也可以为背景颜色使用RGBa（α表示）颜色。例如，50％的黑色背景褪色：<div style="background-color:rgba(0, 0, 0, 0.5);">&nbsp; &nbsp;<div>&nbsp; &nbsp; &nbsp; Text added.&nbsp; &nbsp;</div></div>

Answer 2

可以使用以下方法解决您的问题：CSS alpha透明方法（在Internet Explorer 8中不起作用）：#div{background-color:rgba(255,0,0,0.5);}根据您的选择使用透明的PNG图像作为背景。使用以下CSS代码段创建跨浏览器的alpha透明背景。这是#000000不透明度为0.4％的示例.div {&nbsp; &nbsp; background:rgb(0,0,0);&nbsp; &nbsp; background: transparent\9;&nbsp; &nbsp; background:rgba(0,0,0,0.4);&nbsp; &nbsp; filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);&nbsp; &nbsp; zoom: 1;}.div:nth-child(n) {&nbsp; &nbsp; filter: none;}有关此技术的更多详细信息，请参阅this，它具有一个在线CSS生成器。