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属性，因为不透明度会影响所有孩子。

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

Chris Coyier（CSS-tricks）撰写了一篇关于此事的文章：http://css-tricks.com/rgba-browser-support/

Answer 2

如果您只想让背景变得不透明，可以使用透明的png或rgba-value作为背景。否则这是不可能的（正如你所提到的）。

Answer 3

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

您也可以add another element。

（您还应该使用a list。）

玩CSS不透明度

3 个答案: