使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果
在WOYO的重构团队中，曾经有同学分享了一个PPT，其中一点提到了利用IE的过渡滤镜实现在IE下具有透明属性的效果。对于在各个浏览器中使用透明效果的方法，我记得曾经在《CSS那些事儿》中介绍的方法是使用alpha滤镜以及opacity属性来完成的，但是这两个却会带来一个不良的效果就是会将元素内的内容也透明了（这点我在《【PPT分享】影响网站开发的效率与成本的“优雅降级”》中的PPT第47页也有提到过，当然解决的办法也是有的）。虽然有解决的办法，但是这并不是这次我所希望介绍给大家的，这次我所要介绍给大家的是利用IE的过渡滤镜和CSS3中的rgba属性来完成我们所想要的透明效果。
多余的话就不说了，直接入正题。要实现这个透明效果其实很简单，首先我们来看一下IE下的使用过渡这个滤镜的时候需要注意的内容有哪些。
1 | filter:progid:DXImageTransform.Microsoft.gradient(enabled='true',startColorstr='#FFAABBCC', endColorstr='#FFAABBCC'); |
看到这段CSS代码，不知道大家是否注意到在颜色值中存在了8个字符，而正常的十六进制颜色值是6个字符的，那么另外2个字符是干吗用的呢？其实另外两个字符就是由透明度转变过来的。众所周知，透明度在IE中的值是1~100之间，而颜色值的两个字符转为十进制时所表示的是255，那么在这个滤镜中我们如果要使用透明度的话，就必须将透明度的值通过255这个十进制值最终转化为十六进制，例如透明度100最终转为十六进制就是FF了。
关于透明滤镜具体参数的介绍，大家可以去翻阅一下滤镜手册，这里就不多介绍了，无非就是开启滤镜、过渡色开始的颜色和过渡色结束的颜色这么三个值。
接着我们来看一下CSS3属性中rgba属性是怎么实现透明度的，曾经如果使用过rgb属性的朋友应该知道，rgb代表的是红绿蓝三种颜色，属性值是由三个十进制的数字所表示的，区间于0~255。那么rgba属性无非就是多了一个透明度的属性值，而这个属性值是在0~1之间的数值。
1 | background:rgba(170,187,204,1); |
对于rgba属性的具体介绍这里也就不过多介绍了，网上有太多太多相关的资料，大家可以搜索一下。在这里我们只要明白为了要实现各个浏览器透明的效果主要是利用到了这么两个属性即可。为了方便于使用这个方法，减少计算的时间，小志在元旦假期期间搞了这么一个简单的JS小工具，希望能被大家所喜欢。
需要使用这个十六进制与十进制颜色之间转变小工具的朋友请点击这里：CSS背景颜色属性值转换
新增一个FLASH版的小工具，有兴趣的朋友请挪步到下面这个链接地址中：http://blog.linxz.de/ie_filter_css3_rgba_flash/
志哥你的这个工具太实用了，真是相见恨晚呀。
显然你没太多关注我的博客嘛，虽然我更新的不频繁。嘻嘻。
[...] 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新 [...]
[...] 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新 [...]
[...] 关于这个大家可以看两篇文章小志的《使用IE过渡滤镜和CSS3中的RGBA属性完成背景色透明效果》和小鱼的《背景半透明最佳实践》，这里就不展开了，这里提供一个小志的CSS背景颜色属性值转换工具，并在他的基础上做了少许的修改，还有就是被小志严重鄙视的去掉了提示！嘎嘎！ [...]
[...] 背景色alpha透明工具：http://www.linxz.de/demo/hex_change.html（IE滤镜须是在一个有宽高设置的容器中，或者激活haslayout的属性。具体介绍：http://blog.linxz.de/ie_filter_css3_rgba/）–2011-01-18更新 [...]
测试成功，非常感谢