背景颜色的不透明度，但不包括文本

Question

背景颜色的不透明度，但不包括文本

如何使跨浏览器(包括InternetExplorer 6)对div而文字仍然不透明？

我需要在不使用任何库(如jQuery等)的情况下这样做。(但如果你知道一个库，我很想知道，这样我就可以查看他们的代码)。

Answer 1

我用了一个透明的PNG：div.semi-transparent {   background: url('semi-transparent.png');}对于IE6，您需要使用PNG修复(1, 2)尽管如此。

Answer 2

我在我的博客上创造了这个效果兰德曼码.我所做的是#Header {&nbsp; position: relative;}#Header H1 {&nbsp; font-size: 3em;&nbsp; color: #00FF00;&nbsp; margin:0;&nbsp; padding:0;}#Header H2 {&nbsp; font-size: 1.5em;&nbsp; color: #FFFF00;&nbsp; margin:0;&nbsp; padding:0;}#Header .Background {&nbsp; background: #557700;&nbsp; filter: alpha(opacity=30);&nbsp; filter: progid: DXImageTransform.Microsoft.Alpha(opacity=30);&nbsp; -moz-opacity: 0.30;&nbsp; opacity: 0.3;&nbsp; zoom: 1;}#Header .Background * {&nbsp; visibility: hidden; // hide the faded text}#Header .Foreground {&nbsp; position: absolute; // position on top of the background div&nbsp; left: 0;&nbsp; top: 0;}<div id="Header">&nbsp; <div class="Background">&nbsp; &nbsp; <h1>Title</h1>&nbsp; &nbsp; <h2>Subtitle</h2>&nbsp; </div>&nbsp; <div class="Foreground">&nbsp; &nbsp; <h1>Title</h1>&nbsp; &nbsp; <h2>Subtitle</h2>&nbsp; </div></div>重要的是，每一个填充/边距和内容在.backplace中都必须与.Foreplace相同。