为菜单设置不透明度，但在 CSS 中保持文本不透明答案

【问题标题】：Set opacity to the menu but keep text opaque in CSS为菜单设置不透明度，但在 CSS 中保持文本不透明
【发布时间】：2011-04-01 09:50:19
【问题描述】：

如何创建只有背景透明的菜单？文本应保持不透明（不透明度：1）

如果我设置

li:hover {
    opacity: 0.5
}

整个列表项变得透明。我该如何解决？

【问题讨论】：

标签： css transparency opacity rgba

【解决方案1】：

CSS3 中有一个名为“rgba”的新值，它允许您使用透明色作为背景色。例如：

li:hover {
    background-color: rgba(255, 255, 255, 0.5);
}

我很确定这应该可以，尽管我只是在现场编写了代码，所以它可能不会。然而，这会给你的菜单带来白色的色调。不过，如果您想了解更多关于 RGBA 的信息，请访问：http://css-tricks.com/rgba-browser-support/

【讨论】：

这是最简单的解决方案，但缺少 IE 和 FF2 支持是很大的缺点
对于 OP：请注意 CSS3 尚未与所有浏览器兼容。如果这不打扰您，这是一个很好的答案。
实际上，有一个 hack 允许 Internet Explorer 使用 Microsoft 制作的“filter:progid:DXImageTransform.Microsoft.gradient”属性实现类似 RGBA 的效果。我链接到的文章中有更多关于它的信息。不过我不知道FF2。

【解决方案2】：

您需要使用透明 PNG 图像或 rgba colour value 作为 <li> 的背景，例如：

li:hover {
    background-color: rgba(0, 0, 0, 0.5);
}

或者：

li:hover {
    background: url(a-nice-semi-transparent-png-image.png);

    /* Supplying just the image file here will make the browser repeat the image
    file vertically and horizontally, thus taking up all the space, just like a 
    colour would */
}

【讨论】：

【解决方案3】：

我不认为，这是可能的，试试这个例子：http://jsfiddle.net/578SV/

【讨论】：

【解决方案4】：

你不能。透明度级别传递给所有子元素。

您的选择：

在li 上放置另一个元素，可能使用position: absolute，具有正常的不透明度设置
使用具有 Alpha 透明度的 PNG 文件来创建不透明效果（在 IE6 中需要解决方法）
使用@hatkirby 所示的新rgba 颜色属性，如果您可以忍受不完整的浏览器支持

【讨论】：