如何创建一个仅背景透明的菜单?文本应该保持不透明 (opacity: 1)。
如果我设置
li:hover {
opacity: 0.5
}
整个列表项变得透明了。我该怎么办?
如何创建一个仅背景透明的菜单?文本应该保持不透明 (opacity: 1)。
如果我设置
li:hover {
opacity: 0.5
}
CSS3 中有一个名为 "rgba" 的新值,它允许您使用透明颜色作为背景颜色。例如:
li:hover {
background-color: rgba(255, 255, 255, 0.5);
}
我相当确定这应该可以工作,尽管我是即兴编写的代码,所以可能不行。然而,这将使您的菜单略带白色。如果您想了解更多关于RGBA的知识,请访问这里:http://css-tricks.com/rgba-browser-support/
你需要使用透明的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 */
}
不行的。透明度水平会被传递给所有子元素。
你的选择:
在 li
上方放置另一个元素,可能使用 position:absolute
,具有正常的不透明度设置
使用 Alpha 透明度的 PNG 文件创建不透明度效果(需要解决 IE6 中的问题)
使用新的 rgba
颜色属性,如 @hatkirby 所示,如果您可以接受不完整的浏览器支持