兼容ie和firefox的透明div的css代码
2009-07-02 10:52
741 查看
<script type="text/javascript"><!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
// --></script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
也许你有的时候需要实现透明层的特殊效果，其实通过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
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
// --></script>
<script src="http://pagead2.googlesyndication.com/pagead/show_ads.js" type="text/javascript"></script>
也许你有的时候需要实现透明层的特殊效果，其实通过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
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- div+css最小高度的实现代码(兼容ie6/ie7/ie8/firefox)
- 完美兼容IE及Firefox的PNG背景透明CSS代码
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- CSS实现圆角、透明在IE、火狐中的代码兼容解决办法
- 兼容IE6和Firefox的PNG背景透明CSS代码
- CSS两列自适应高度DIV（高度自动增加）兼容ie和firefox
- 让Flash背景透明兼容Firefox、IE 6和IE 7的代码
- [原创]透明的DIV提示框(兼容IE与Firefox)
- 代码短小的js div层拖动实现代码[兼容IE与Firefox]
- 代码短小的js div层拖动实现代码[兼容IE与Firefox]
- 黄聪：DIV+CSS建站经验总结，不同版本IE下CSS布局bug问题（IE5、IE6、IE7、IE8、火狐Firefox兼容）
- Div+Css兼容Ie和Firefox
- CSS设置DIV Herf底层图片和链接同时改变,兼容IE，Firefox,Opera,Safari,Chrome等
- IE, FireFox, Opera 浏览器支持CSS实现Alpha透明的方法 兼容问题
- 让Flash背景透明兼容Firefox、IE 6和IE 7的代码
- 兼容IE、Firefox的DIV透明
- ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码
- 使用IE条件注释 实现兼容 IE, Opera, Firefox 的 DIV+CSS 表格布局 By shawl.qiu
- ie和firefox中通用的设置div最小高度和达到这一最小高度后自适应的css代码
- 在IE和Firefox中实现网页中的图层透明的CSS代码