利用DIV+CSS实现元素透明的两种方法

在网页前端设计中，一个透明特效的应用往往可以很大地提升网页视觉效果，一般实现透明的方法是添加 opacity样式，具体实现方法代码为：

代码注释：

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属性控制透明的时候，要注意透明度的继承问题：我们额外为子元素指定其他透明度也是无效的。

这点很不友好，当我们需要背景透明，但是文字正常显示的时候，这个方法就不适用了，今天，余斗给出另外一个解决方案，给背景设置滤镜效果来实现透明，实现代码为：

代码注释：

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 滤镜代码即可。

代码注释：这段代码可以变网页为黑白，将代码加到CSS最顶端就可以实现素装。

有一些站长反馈这段css 不能生效，那是因为网站没有使用最新的网页标准协议：

将网页最头部的替换为以上代码即可。

还有一些网站FLASH动画的颜色不能被CSS滤镜控制，可以在FLASH代码的和之间插入：