<!--
google_ad_client = "pub-4490194096475053";
/* 内容页,300x250,第一屏 */
google_ad_slot = "3685991503";
google_ad_width = 300;
google_ad_height = 250;
// -->
也许你有的时候需要实现透明层的特殊效果，其实通过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网页中IE和火狐兼容问题的整理
十年积累，div+css 完全兼容 ie6 ie7 IE8 IE9 和firefox方法
(十年积累)div+css_完全兼容ie6_ie7_IE8_IE9_和firefox方法.doc\(十年积累)div+css_完全兼容ie6_ie7_IE8_IE9_和firefox方法.doc
本文档中集中了我在网页制作中经常遇到的兼容性问题，望大家可以参考。
div+css兼容ie6ie7ie8ie9和FireFoxChrome等浏览器方法[借鉴].pdf
div+css静态文章模板（兼容火狐，IE6，IE7）！div+css静态文章模板（兼容火狐，IE6，IE7）
本文收集整理了IE7,6与Fireofx的CSS兼容性处理技巧，供大家参考。 CSS兼容常用技巧 请尽量用xhtml格式写代码，而且DOCTYPE影响 CSS 处理，作为W3C标准，
随缘asp企业网站管理系统(兼容IE及firefox) 后台可以用以下地址： http://您的网址/manage/login.asp 默认登录用户：admin 默认登录密码：admin 一、全站采用主流DIV+CSS框架布局,DIV+CSS的优势何在? 1、符合W3C...
CSS DIV教程IE6，IE7ie8火狐兼容性入门和精通都试用的很好的教程。很快的学会DIV+CSS。
纯DIVCSS对联漂浮广告代码(无JS),源码网两侧漂浮。经测试，兼容IE6，IE7，Firefox浏览器。
兼容谷歌、火狐、IE7.0以上版本的所有浏览器的透明边框弹窗，带半透明蒙版，参考购物网站实例制作
使用 div+css实现下拉列表的功能 兼容ie6 火狐
我们在用DIV+CSS布局文章内容页面的时候，往往会让DIV或其他元素自适应高度，可是当发布者发布的内容比较少的时候，比如只有一行字，那内容部分就变的很小，不... //IE7以上/Firefox _height:500px; //IE6 height:100%;
...
...
1.区别IE和非IE浏览器CSS HACK代码 复制代码代码如下:#divcss5{background:blue; /*非IE 背景藍色*/background:red \9; /*IE6、IE7、IE8背景紅色*/} 2.区别IE6,IE7,IE8,FF CSS HACK 【区别符号】：「\9」、「*」、「...
。
。