在保持孩子相同的同时改变父母的不透明度

Question

在自己试用的页面http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_opacity中，他们将div的不透明度设置为60％。在这样做， 黑色文字也改变了。有没有办法实现div透明而不修改文本的不透明度？

Answer 1

是的，有办法做到这一点。您可以使用rgba值

请参阅此内容 - http://jsfiddle.net/aniketpant/jR2ZZ/

不使用opacity，而是使用rgba

HTML

<div>
This element's opacity is 0.5! Note that both the text and the background-color are affected by the opacity level!
</div>

CSS

div {
    background: rgba(255, 0, 0, 0.5);
}

Answer 2

是和否。 opacity本身将始终影响它所在元素的子元素，而且你无能为力。

你可以做的是使用div给background-color RGBa - 例如div { background-color: rgba(0,0,0,0.6); /* 60% opaque black */ }这只会影响它应用的div，但是不是孩子或内容。

支持RGBa不是通用的 - Firefox和Chrome支持它，但IE 8及更低版本不支持，所以请记住指定一种后备颜色。

有关详细信息，请参阅here。