玩CSS不透明度

Question

我正在尝试使用简单创建一个buttonbar <div>并将其不透明度更改为50%并给出背景

但是这个部门内部的元素与父母一样具有相同的透明度<div>.我希望他们保持100%的不透明度.(这是不可能的).如何使这成为可能？

我想要做的一个示例CSS就是这个

<style>    
    #bar { background:#09f;opacity:0.5; }
    #bar a { background:#FF0;opacity:1; }
</style>
<div id="bar">
    <a href="#">Home</a>
    <a href="#">Contact</a>
    <a href="#">Feedback</a> 
</div>

Answer 1

您需要使用该rgba属性,因为不透明度会影响所有子项.

#bar { background: rgba(0, 120, 255, 0.5); }

Chris Coyier(CSS-tricks)写了一篇关于此的帖子:http://css-tricks.com/rgba-browser-support/