CSS 背景不透明度

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

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

您可以使用 CSS 3 :before具有半透明的背景，并且只需一个容器即可完成此操作。使用这样的东西

<article>
  Text.
</article>

然后应用一些 CSS

article {
  position: relative;
  z-index: 1;
}

article::before {
  content: "";
  position: absolute;
  top: 0; 
  left: 0;
  width: 100%; 
  height: 100%;  
  opacity: .4; 
  z-index: -1;
  background: url(path/to/your/image);
}

范例： http：//codepen.io/anon/pen/avdsi

注意：您可能需要调整z-index值。

可以使用以下方法解决您的问题：

CSS alpha 透明方法（在 Internet Explorer 8 中不起作用）：
```
#div{background-color:rgba(255,0,0,0.5);}
```
根据您的选择使用透明的 PNG 图像作为背景。

使用以下 CSS 代码段创建跨浏览器的 alpha 透明背景。这是不透明度为 0.4％时#000000

.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 生成器。