大家还记得361源码前面给大家介绍的悼念日特效《CSS实现页面全灰色》的实现办法吗？很多朋友看了文章后给361源码留言，因此也引申出了今天这篇文章：DIV+CSS元素透明的两种方法介绍。
在网页前端设计中，透明特效的应用往往可以很大地提升网页视觉效果，一般实现透明的方法是添加 opacity 样式，这也是我们最为常用的实现透明的方法。
一、opacity样式实现元素透明
代码如下：
.transparent_class {filter:alpha(opacity=50);-moz-opacity:0.5;-khtml-opacity: 0.5;opacity: 0.5; }代码解析：
opacity: 0.5; 这是最重要的，因为它是CSS标准.该属性支持Firefox, Safari和 Opera。
filter:alpha(opacity=50); 这个是为IE6设的，可取值在0-100，其它三个0到1。
-moz-opacity:0.5; 这个是为了支持一些老版本的Mozilla浏览器。
-khtml-opacity: 0.5; 这个为了支持一些老版本的Safari浏览器。
在使用opacity属性控制透明的时候，要注意透明度的继承问题：我们额外为子元素指定其他透明度也是无效的。
这点很不友好，当我们需要背景透明，但是文字正常显示的时候，这个方法就不适用了，这也就是今天361源码给大家着重介绍的第二种实现元素透明的方法。
二、filter滤镜实现元素半透明
代码如下：
.transparent_class { filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#3f000000',endColorstr='#3f000000'); background-color:rgba(0, 0, 255, 0.5); }代码解析：
enabled:可选项。布尔值(Boolean)。设置或检索滤镜是否激活。
startColorStr:可选项。字符串(String)。设置或检索色彩渐变的开始颜色和透明度。 其格式为 #AARRGGBB 。 AA 、 RR 、 GG 、 BB 为十六进制正整数。取值范围为 00 - FF 。 RR 指定红色值， GG 指定绿色值， BB 指定蓝色值，参阅 #RRGGBB 颜色单位。 AA 指定透明度。 00 是完全透明。 FF 是完全不透明。超出取值范围的值将被恢复为默认值。 取值范围为 #FF000000 - #FFFFFFFF 。默认值为 #FF0000FF 。不透明蓝色。
EndColorStr:可选项。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
特性：
Enabled:可读写。布尔值(Boolean)。参阅 enabled 属性。
GradientType:可读写。整数值(Integer)。设置或检索色彩渐变的方向。1:默认值。水平渐变。 0:垂直渐变。
StartColorStr:可读写。字符串(String)。参阅 startColorStr 属性。
StartColor:可读写。整数值(Integer)。设置或检索色彩渐变的开始颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。
EndColorStr:可读写。字符串(String)。设置或检索色彩渐变的结束颜色和透明度。参阅 startColorStr 属性。默认值为 #FF000000 。不透明黑色。
EndColor:可读写。整数值(Integer)。设置或检索色彩渐变的结束颜色。 取值范围为 0 - 4294967295 。 0 为透明。 4294967295 为不透明白色。当在脚本中使用此特性时，也可以用十六进制格式： 0xAARRGGBB 。
在对象的背景和内容之间显示定制的色彩层。当此效果通过转变显示时，在渐变册色彩层之上的文本程序性的初始化为透明的，当色彩渐变实现后，文本颜色会以其定义的值更新。 这样就能实现div块的背景透明而子元素不会透明，比使用opacity属性要人性化得多。
下面我们通过具体的演示效果来看看两种透明效果区别： DIV+CSS实现透明的两种方法预览
最后，我们就前面的《CSS实现页面全灰色》再做个延伸：
一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：
html {FILTER: gray}当然也有些朋友使用的一句话效果代码如下：
html { filter:progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); }在使用上面这一句话代码的适合需要注意一点就是必须是使用最新的网页标准协议，否则可能不生效哦。
<!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">
好了，废话讲解了好多，希望能对大家有所帮助
新闻热点
疑难解答
