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

Question

背景颜色的不透明度，但不包括文本如何使跨浏览器(包括InternetExplorer 6)对div而文字仍然不透明？我需要在不使用任何库(如jQuery等)的情况下这样做。(但如果你知道一个库，我很想知道，这样我就可以查看他们的代码)。

Answer 1

我用了一个透明的PNG：

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

对于IE6，您需要使用PNG修复(1, 2)尽管如此。

Answer 2

我在我的博客上创造了这个效果兰德曼码.

我所做的是

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

重要的是，每一个填充/边距和内容在.backplace中都必须与.Foreplace相同。