嗨，我正在为 div 标签使用 CSS Opacity 属性，它运行良好，但问题是当我在该 div 标签上写一些文本或粘贴图像时，它们也会变淡。我只需要让 div 的背景颜色褪色，而不是 div 的内容。我的代码是...
#fade div
{
opacity:0.1;
filter:alpha(opacity=10); /* For IE8 and earlier */
width:750px;
height:150px;
background-color:#FFFFFF;
}
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
}
谢谢你！！！
【问题讨论】：
使用rgba() 或透明PNG 作为背景要容易得多。
rgba(0, 0, 0, .1);
rgba(0, 0, 0); //fallback
【讨论】：
您可以为此使用rgba() 属性：
这样写：
#fade div
{
background-color: rgba(0,0,0,0.1);
width:750px;
height:150px;
background-color:#FFFFFF;
}
对于 IE 你可以使用IE filter
background: transparent;-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000)"; /* IE8 */ filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#19000000,endColorstr=#19000000); /* IE6 & 7 */ zoom: 1;
您可以从这里生成您的过滤器http://kimili.com/journal/rgba-hsla-css-generator-for-internet-explorer/
【讨论】：
background-color: rgba(0,0,0,0.1);
只需使用 1px 半透明 gif 并按 x 和 y 重复。据我所知，这是设置半透明背景的最简单方法。
【讨论】：
当然，不透明度也适用于子元素。您可以做的是隔离您的标记。
<div id='Div-With-Opacity-set'>
</div>
<div id='Child-Elements-for-the-above-div'>
</div>
仔细对齐您的标记，使标记与您想要的相似。
【讨论】：
那你为什么不重新设置不透明度呢？
#text in fade div
{
font-weight:bold;
color:#8A2BE2;
opacity:1;
filter:alpha(opacity=100); /* For IE8 and earlier */
}
【讨论】：
opacity 无论如何都不是继承属性。
不使用 CSS3 的最佳选择可能是创建一个 div 并将另一个 div 放在它上面，但不要嵌套在其中。不透明度过滤到具有不透明度集的元素内的所有元素。
如果你把一个 div 放在右边，然后给它一个 -750px 的边距，你可以给它一个不透明度 1，但是它后面的 div 可以有一个 0.1 的不透明度，这样可以正常工作.
使用 CSS3，您可以这样做：
#fade
{
width:750px;
height:150px;
background-color: rgba(255,255,255,0.1);
}
只有背景的不透明度为 0.1。文本仍为 1。
不过，我个人最常做的是创建一个带有我想要的透明背景的小 .png，然后将该 .png 设置为元素的背景。在 Photoshop 中，我可以将白色背景的不透明度设置为 0.1，然后保存一个 50X50 的正方形，然后我就获得了近乎完美的透明度（没有 IE6）。
【讨论】：
你需要像http://jsfiddle.net/PWM5f/这样的东西
【讨论】：