css div透明度的控制方法

发布时间:2020-10-19编辑:脚本学堂
本文介绍下,使用css样式代码控制div透明度的办法,需要用到css滤镜效果,有需要的朋友参考下。

css控制透明度,可以使用滤镜 filter:alpha(opacity=50);  -moz-opacity:0.5;  opacity:0.5;

例子:
通过ie6 ie7 ie8 ff3 opera 谷歌 safari测试
 

复制代码 代码示例:
#test{ background-color:#0000CC; filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; width:100px; height:100px;}

会存在:浏览器兼容性问题,而且IE滤镜的频繁使用会使浏览器的执行效率降低。

用滤镜的缺点就是这样,因此不提倡过多使用。

可以考虑用其它的方法进行模拟,比如用宽高都是1px的透明png图片覆盖等。

例子:
 

复制代码 代码示例:
#test{ background-color:#000} #test span{ color:#fff; zoom:1 filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; }
<div id="test"><span>前景色透明度</span></div>看看“前景色透明度”这几个字是不是纯白色,还是白色的50%透明。

如此也可以实现div的透明显示。