如何仅为元素的背景提供跨浏览器透明度?

时间:2010-05-03 11:12:27

标签: css

如何仅将跨浏览器透明度提供给后台?

我想透明ul { background: }的背景,只是不想让ul li a {}内的文字透明。

ul {
    filter: alpha(opacity=50); /* internet explorer */
    -khtml-opacity: 0.5;      /* khtml, old safari */
    -moz-opacity: 0.5;       /* mozilla, netscape */
    opacity: 0.5;           /* fx, safari, opera */
}

此代码使所有内容都透明http://perishablepress.com/press/2009/01/27/cross-browser-transparency-via-css/

1 个答案:

答案 0 :(得分:3)

您可以使用RGBA颜色。我为你做了一个例子:

http://jsfiddle.net/ypaTH/

ul {
 background: rgba(255, 255, 255, 0.5) //white with opcaity of 50%
}

ul li {
 color: #fff;
 background: rgba(0, 0, 0, 0.5) //black with opcaity of 50%
}

这是IE和兼容列表的解决方法: http://css-tricks.com/rgba-browser-support/