css - 改变 parent 的不透明度，同时保持 child 的不透明度

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);
}