CSS不透明和子元素

<style type="text/css"> div#foo { background: #0000ff; width: 200px; height: 200px; opacity: 0.30; filter: alpha(opacity = 30); } div#foo>div { color: black; opacity:1; filter: alpha(opacity = 100); } </style> <div id="foo"> <div>Lorem</div> <div>ipsum</div> <div>dolor</div> </div> 

在上面的例子中， div#foo的不透明性div#foo元素inheritance，导致文本变得几乎不可读。 我认为这是错误的说它是inheritance，不透明是适用于父div和子项是其中的一部分，所以试图覆盖它的子元素不起作用，因为从技术上讲，他们是不透明的。

我通常只是在这种情况下使用阿尔法PNG背景图像，但今天我想知道是否有一个更好的方式来使半透明背景不影响内容。

Answer 1

你可以使用rgba（） 。

 div#foo { background: rgba(0, 0, 255, 0.3); } 

为了使它在旧的Internet Explorers中使用CSS PIE 。 有一些限制 ，但这些限制是以向后兼容的方式处理的：RGB值将被正确渲染，不透明度将被忽略。

Answer 2

最好的办法是设置透明PNG到背景..

Answer 3

如果使用不透明度，则必须将它们放在单独的DIV中，然后将它们排列在一起。 背景DIV将具有较低的不透明度，前景DIV将使您的内容具有100％的不透明度。