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

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

您的选择：

将另一个元素置于li的顶部，可能使用position: absolute，其具有正常的不透明度设置
使用具有Alpha透明度的PNG文件来创建不透明效果（需要在IE6中使用变通办法）
如果您可以使用不完整的浏览器支持，请使用@hatkirby所示的新rgba颜色属性

Answer 3

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

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 4

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

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

4 个答案: