你可以使用::before和display: inline-block来放松你在IE6和传统浏览器上的工作要求

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/ ​

它可以在任何现代浏览器上运行

我使用一个alpha透明的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>

重要的是。background和。prospect中的每一个边距和内容都必须相同。

使用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浏览器是透明的，最好是通过条件注释或类似的方式提供服务!

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

你可以使用::before和display: inline-block来放松你在IE6和传统浏览器上的工作要求

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/ ​

它可以在任何现代浏览器上运行

感谢@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;
    }
  }