css中的不透明度值

Question

我试图让条形图的背景具有50％的不透明度，前景文本根本没有任何不透明度，这是我的代码

HTML：

<div id="footer">
      <p>FOOTER TEXT</p>
</div>

的CSS：

#footer {opacity: 0.5;} #footer p {opacity: 1;}

我不明白为什么这不是任何人可以帮忙的工作？

Answer 1

你尝试的东西不起作用，50％的100％等于50％！

如果您的背景必须是透明的，则可以使用带有rgba属性的PNG-24图片或background-color值。

Answer 2

如果背景是图像，则必须使用半透明图像。

如果背景为纯色，则可以使用rgba()值。这与rgb()的工作方式相同，但不透明度级别具有附加值，但浏览器支持有限，因为它是CSS 3草稿中的新功能。

background-color: rgba(0, 0, 255, 0.5);

您可以combine rgba() with a background image向后兼容。

background: url(blue_0.5_pixel.png);
background: rgba(0%, 0%, 100%, 0.5);

Answer 3

我认为你正在检查IE浏览器。 您定义的内容将适用于非浏览器。 为了使它在IE中工作，将样式改为：

#footer {opacity: 0.5;filter: alpha(opacity=50);}
#footer p {opacity: 1;filter: alpha(opacity=100);}