CSS背景不透明
这个问题在这里已经有了答案：
儿童继承不透明。 如果他们不这样做会很奇怪和不方便。
您可以为背景图像使用半透明的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 Aplha透明度方法（在IE 8中不起作用）
#div{background-color:rgba(255,0,0,0.5);}
根据您的选择使用透明PNG图像作为背景。
使用下面的CSS代码片段来创建一个跨浏览器的透明背景。 这是#000000 @ 0.4％不透明度的例子
.div {
background:rgb(0,0,0);
background: transparent9;
background:rgba(0,0,0,0.4);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000);
zoom: 1;
}
.div:nth-child(n) {
filter: none;
}
有关这种技术的更多细节，请参阅这个，它有一个在线css生成器。
链接地址: http://www.djcxy.com/p/4821.html