在CSS中将菜单的不透明度设置为一定值，但保持文本不透明。

Question

如何创建一个仅背景透明的菜单？文本应该保持不透明 (opacity: 1)。

如果我设置

li:hover {
    opacity: 0.5
}

整个列表项变得透明了。我该怎么办？

- Rodrigo Souza

Answer 1

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

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

我相当确定这应该可以工作，尽管我是即兴编写的代码，所以可能不行。然而，这将使您的菜单略带白色。如果您想了解更多关于RGBA的知识，请访问这里：http://css-tricks.com/rgba-browser-support/

- hatkirby

---

这是最简单的解决方案，但缺少IE和FF2支持是很大的缺点。 - Pekka

对于OP：请注意，CSS3尚未与所有浏览器兼容。如果这不影响您，那么这是一个很好的答案。 - Saladin Akara

实际上，有一个技巧可以使用微软制作的“filter:progid:DXImageTransform.Microsoft.gradient”属性在Internet Explorer中实现类似RGBA的效果。关于此更多信息，请参阅我链接的文章。不过，我不知道FF2是否支持。 - hatkirby

Answer 2

你需要使用透明的PNG图像或rgba颜色值来设置<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 */
}

- Paul D. Waite

Answer 3

不行的。透明度水平会被传递给所有子元素。

你的选择：

• 在 li 上方放置另一个元素，可能使用 position：absolute，具有正常的不透明度设置

• 使用 Alpha 透明度的 PNG 文件创建不透明度效果（需要解决 IE6 中的问题）

• 使用新的 rgba 颜色属性，如 @hatkirby 所示，如果您可以接受不完整的浏览器支持

- Pekka

Answer 4

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

- davehauser