css - 玩转 CSS 不透明度

Question

我正在尝试使用简单的 <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属性，因为不透明度会影响所有 child 。

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

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