玩转 CSS 不透明度答案

【问题标题】：Playing with CSS Opacity玩转 CSS 不透明度
【发布时间】：2010-06-28 18:24:28
【问题描述】：

我正在尝试使用简单的<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>

【问题讨论】：

标签： css opacity

【解决方案1】：

您需要为此使用rgba 属性，因为不透明度会影响所有子项。

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

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

【讨论】：

RGBA 4th Param 的最佳答案 :) +1
但这不兼容 IE
@Starx 也不是opacity 就像@RobertPitt 所说的那样，将rgba 作为辅助参数包含在内，这样您就有了IE 的后备方案。如果您想要一个更跨浏览器兼容的解决方案，请使用 oezi 的答案：transparent png（但在 IE6 中不起作用），它不像仅使用 CSS 那样流畅，但适用于 IE7+。

【解决方案2】：

如果您只希望背景不透明，您可以使用透明 png 或 rgba 值作为背景。否则这是不可能的（正如你提到的）。

【讨论】：

【解决方案3】：

在您的图形编辑器中设置不透明度，然后将两个图层拼合在一起。

你也可以add another element。

（你也应该使用a list。）

【讨论】：