给网页中的元素设置透明度

Question

透明度总是很玄幻，在网页制作中也经常用到，合理的使用透明度能够给我们的网页效果带来鱼一样的视觉体验，当然这其中就有很多复杂的技术，已经更多的浏览器兼容问题。

一般我们不给元素设置任何样式，那么这个元素的背景和边框就都是透明的，也就是没有设置，显示缺省的属性，浏览器会自动给这些元素的 background 和 border 属性加上 transparent 属性值。

而有的浏览器在处理这个缺省值的时候略有差异，比如Google浏览器会自动加上 rgba(0, 0, 0, 0)，也就是我们所说的Alpha通道为 0，那么就可以理解为 transparent 属性值和 rgba(0, 0, 0, 0) 是基本等价的。

在CSS中设置元素的透明度有两种方法，Alpha通道与Opacity属性。

Alpha通道

Alpha通道就是我们经常使用的 rgba 颜色，在原来的 rgb 上加上一个透明度，而且只针对于可以设置颜色的CSS属性有效，可以单独设置某一个CSS属性。

div {  
    width: 100px;  
    height: 100px;  
    background: rgba(0,0,0,0.5);  
    border: 1px solid #000000;  
}

Opacity透明度

Opacity设置整个元素的透明度，取值从 0-1 并且支持小数。

div {  
    width: 100px;  
    height: 100px;  
    background: #000000;  
    border: 1px solid #000000;  
    opacity: 0.5;  
}

IE的透明度

IE9+才开始支持CSS3 opacity，而对IE6-IE8我们习惯使用 filter 滤镜属性来进行实现。IE4-IE9都支持滤镜写法 progid:DXImageTransform.Microsoft.Alpha(Opacity=xx)。

IE8又引入了特殊的 -ms-filter，IE认为这种写法是对旧写法的一次更正，更符合规范，这个写法的属性值只是多了一对引号，效果同前。不过这种写法的寿命也不长，到IE10对 filter 与 -ms-filter 都已经不再支持。

-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; // first  
filter: alpha(opacity=50); // second

如果你要同时使用 filter 和 -ms-filter，请将 -ms-filter 写在 filter 的前面。

注意：测试不要忘了写 DOCTYPE，否则会偏离真实效果。

总结

为了一个透明度我们至少要写4行代码，这个也是为了兼容性，随着浏览器版本的更新，后面我们将得到更加兼容的写法，节省我们的开发时间。

我们发现在利用 alpha 通道设定透明度的时候需要单独对每一个设定，而 opacity 直接就运用在了整个标签上， 其实这就是两者最大的区别，总结来说 opacity 只能设定整个元素的透明值，而 alpha 通道可以特定对元素的某个属性设定透明值，比如上面的背景、 边框、文字等。