3

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

如果我设置

li:hover {
    opacity: 0.5
}

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

4

4 回答 4

7

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

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

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

于 2010-08-19T22:46:58.317 回答
0

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

您的选择：

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

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

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

于 2010-08-19T22:47:22.977 回答
0

您需要为 的背景使用透明的 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 */
}
于 2010-08-19T22:48:35.833 回答
0

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

于 2010-08-19T22:48:48.747 回答