也许你有的时候需要实现透明层的特殊效果，其实通过css代码就可以很简单的实现，并且兼容ie和firefox，代码如下：filter:alpha(opacity=20);-moz-opacity:0.20;在div的样式代码里面加上就可以了，filter:alpha(opacity=20)控制ie下的效果，这里的20可以是0到100之间，数值越大，透明度越低，-moz-opacity:0.20控制firefox下的效果，这里的0.20可以是0到1之间的数，也是数值越大，透明度越低。
但是这里有一个非常重要需要注意的问题，这个层必须有width属性，否则在ie下是看不到透明效果的，你可以拷贝下面的代码进行测试，看看两种css代码在ie和firefox下的效果区别。
代码1：div不带width属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="background-color:#FFE1F0">
<div style="background:#00FF66;filter:alpha(opacity=20);-moz-opacity:0.20;">
<p>透明层效果的实现</p>
<p>透明层效果的实现</p>
</div>
</body>
</html>
代码2：div带width属性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body style="background-color:#FFE1F0">
<div style="background:#00FF66;filter:alpha(opacity=20);-moz-opacity:0.20;width:300px">
<p>透明层效果的实现</p>
<p>透明层效果的实现</p>
</div>
</body>
</html>
http://www.corange.cn/archives/2008/10/2128.html
扫一扫
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
