颜色，但不是文字
这个问题在这里已经有了答案：
使用rgba！
.alpha60 {
/* Fallback for web browsers that don't support RGBa */
background-color: rgb(0, 0, 0);
/* RGBa with 0.6 opacity */
background-color: rgba(0, 0, 0, 0.6);
/* For IE 5.5 - 7*/
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000);
/* For IE 8*/
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#99000000, endColorstr=#99000000)";
}
除此之外，您必须声明background: transparent IE浏览器background: transparent ，最好通过条件注释或类似的方式提供！
通过http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/
我使用了一个透明的PNG：
div.semi-transparent {
background: url('semi-transparent.png');
}
对于IE6，你需要使用PNG修正（1，2）。
我在我的博客Landman Code上创建了这个效果。
我做的是
#Header {
position: relative;
}
#Header H1 {
font-size: 3em;
color: #00FF00;
margin:0;
padding:0;
}
#Header H2 {
font-size: 1.5em;
color: #FFFF00;
margin:0;
padding:0;
}
#Header .Background {
background: #557700;
filter: alpha(opacity=30);
filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);
-moz-opacity: 0.30;
opacity: 0.3;
zoom: 1;
}
#Header .Background * {
visibility: hidden; // hide the faded text
}
#Header .Foreground {
position: absolute; // position on top of the background div
left: 0;
top: 0;
}<div id="Header">
<div class="Background">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
<div class="Foreground">
<h1>Title</h1>
<h2>Subtitle</h2>
</div>
</div>