传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。
CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能,而IE直到Internet Explorer 9才会开始支持一些CSS3属性。
Opacity
这其实是一个旧属性,令人惊奇的是,它被IE的当前版本支持——尽管是以一种比较复杂的方法。
Opacity将整个CSS 对象变透明,所有的子元素的透明度也会适当的继承。官方的语法如下:
opacity: [0-1的小数];
所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它,老的浏览器还是需要一些定制的代码,就像IE浏览器一样。
目前较老的Firefox版本,我们需要使用-moz-前缀,而对于旧的Safari/Chrome版本,我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说,我们需要使用-khtml-。那么如果我们想支持每一个浏览器,我们的代码应该是这样的:
opacity: 0.5;
-moz-opacity: 0.5;
-webkit-opacity: 0.5;
-khtml-opacity: 0.5;
啊,稍等!IE怎么办?好吧,IE的确完全不支持这个,但是它使用了一个私有的滤镜。传统的方法简短扼要:
filter:alpha(opacity=50);
请注意对于IE我们需要使用从0到100的整数,而不是像opacity属性那样的小数。郁闷的是,Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个,这是很长的一个:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
当然,如果你想支持旧的IE浏览器,你将不得不使用上面的那个短的,这也就意味着如果要兼容绝大部分浏览器,你需要总共六条CSS语句。
PS:事实上,Safari从1.2版本(2004年)就开始支持opacity属性了,KHTML内核的Safai基本很难再找到了,而事实上,Konqueror从未支持过-khtml-opacity属性,所以请不要再使用它(我在翻译的时候考虑到原文的完整性,所以并没有对上面的代码作出修正)。Opera从9.0开始支持CSS3的opacity,而Firefox直到3.5才原生支持opacity。IE8的-ms-再加上filter真是微软的天才作品啊!不过请注意,如果你要同时使用filter和-ms-filter,请注意将-ms-filter写在filter的前面。——神飞