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);">

   <div>

      Text added.

   </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 {

    background:rgb(0,0,0);

    background: transparent\9;

    background:rgba(0,0,0,0.4);

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);

    zoom: 1;

}

.div:nth-child(n) {

    filter: none;

}

有关此技术的更多详细信息，请参阅this，它具有一个在线CSS生成器。