CSS - 将透明度应用于元素但不应用于元素内的文本

Question

我创建了一个菜单块元素，并对其应用了0.4/40的不透明度。

问题在于，不透明度影响了菜单块内的文本，而我希望只将不透明度应用于菜单块本身，而不是文本。

希望我只是忽略了一些小细节。这是我的代码:

#menuLeft{
    background-color: #33AAEE;
    float: left;
    width: 20%;
    clear: both;
    opacity:0.4;
    filter: alpha(opacity = 40);
}

我正在寻找一种方法来保持文本颜色不变/设置不透明度以排除文本。谢谢。

- Mick

Answer 1

这是一个非常非常非常流行的问题。尝试使用 rgba()：

//Your opacity is the latest value here for Firefox 3+, Safari 3+, Opera 10.10+
background-color: rgba(51, 170, 238, 0.6);
//Your opacity is the first pair here (in HEX!) for IE6+
progid:DXImageTransform.Microsoft.gradient(startColorstr=#9A33AAEE,endColorstr=#9A33AAEE); 
zoom: 1;
float: left;
width: 20%;
clear: both;
/*opacity:0.4;
filter: alpha(opacity = 40);*/

你也可以使用http://css3please.com/来轻松地将十六进制颜色值转换为RGB格式，反之亦然。

- Daniel O'Hara

---

一个非常不受欢迎的问题(!) 非常感谢您的帮助，它解决了我的问题！ - Mus

Answer 2

你也可以将一张透明的图片作为背景。 文本应该正常显示。 http://css-tricks.com/snippets/css/transparent-background-images/

- sasdev