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

Question

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

如果我设置

li:hover {
    opacity: 0.5
}

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

Answer 1

CSS3中有一个名为“ RGBA”的新值，它使您可以将透明的颜色用作背景颜色。例如：

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

我相当确定这应该可以起作用，尽管我只是当场编写了代码，因此可能不会。但是，这将使您的菜单具有白色的色调。但是，如果您想了解有关RGBA的更多信息，请转到这里： http://css-tricks.com/rgba-browser-support/

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 */
}

Answer 3

我认为，这是不可能的，请尝试以下示例： http://jsfiddle.net/578sv/

Answer 4

你不能。透明度水平被传给所有子元素。

您的选择：

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

• 使用具有Alpha透明度的PNG文件来创建不透明度效果（将需要在IE6中工作的解决方法）

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