不透明的背景颜色，但不是文字

如何在文本保持不透明的情况下为div的背景创build跨浏览器（包括Internet Explorer 6）透明度？

我需要这样做，而不使用任何库，如jQuery等（但如果你知道这样做的图书馆，我很想知道，所以我可以看看他们的代码）。

Answer 1

使用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)"; } 

除此之外，您还必须声明IE浏览器的background: transparent ，最好通过条件注释或类似的方式提供！

通过http://robertnyman.com/2010/01/11/css-background-transparency-without-affecting-child-elements-through-rgba-and-filters/

Answer 2

我使用一个alpha透明的PNG：

 div.semi-transparent { background: url('semi-transparent.png'); } 

对于IE6，你需要使用PNG修正（ 1，2 ）。

Answer 3

我已经在我的博客Landman Code上创build了这个效果。

我做的是

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

Answer 4

放宽你的要求，在IE6和旧版浏览器上工作，你可以使用:: before和display：inline-block

 div { display: inline-block; position: relative; } div::before { content: ""; display: block; position: absolute; z-index: -1; width: 100%; height: 100%; background:red; opacity: .2; } 

演示http://jsfiddle.net/KVyFH/172/

它可以在任何现代浏览器上工作

Answer 5

感谢@ davy-landmann的https://stackoverflow.com/a/638064/417153 。 这就是我正在寻找的！ 与LESS代码相同的效果：

  @searchResultMinHeight = 200px; .searchResult { min-height: @searchResultMinHeight; position: relative; .innerTrans { background: white; .opacity(0.5); min-height: @searchResultMinHeight; } .innerBody { padding: 0.5em; position: absolute; top: 0; } }