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

【问题标题】：CSS - Apply Opacity to Element but NOT To Text Within The ElementCSS - 将不透明度应用于元素但不应用于元素内的文本
【发布时间】：2025-12-16 22:35:02
【问题描述】：

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

我遇到的问题是不透明度会影响菜单块中的文本，我希望只将不透明度应用于菜单块，而不是文本。

希望我只是错过了一些愚蠢的事情。这是我的代码：

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

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

谢谢。

【问题讨论】：

标签： css

【解决方案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/ 轻松地从 HEX 转换为 RGB 并返回。

【讨论】：

还是一个非常冷门的问题（！）非常感谢您的帮助，它已经解决了我的问题！

【解决方案2】：

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

【讨论】：