玩转CSS3色彩[译]

作者:vocal 来源:前端观察 时间:2010-01-13 13:02:00 

传统来说,大家在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的前面。——神飞

标签:css3,色彩,hsla,RGBa
0
投稿

猜你喜欢

  • Flash对象在(x)HTML中的格式和参数及安全性

    2010-04-01 11:55:00
  • javascript用回车键实现Tab键功能

    2009-07-05 18:40:00
  • mysql5存储过程编写实践

    2008-12-24 16:32:00
  • Ubuntu下设置mysql自动备份

    2010-10-25 20:25:00
  • 用ASP打开远端MDB数据库

    2007-10-13 06:56:00
  • ASP中生成文本文件的两种方式

    2008-04-30 19:33:00
  • 兼容 IE,Firefox 的图片自动缩放 CSS

    2011-09-27 13:36:58
  • 一个20行左右的强$代码

    2009-12-25 15:22:00
  • 高效交换XML文档

    2008-01-03 14:16:00
  • 如何正确的解决 MySQL中忽略用户的现象

    2008-11-27 16:00:00
  • YUI3.3.0 中 transition 事件的变化

    2011-06-16 20:51:45
  • 用CSS设置表格Table的细边框的比较好用的方法

    2010-09-06 14:58:00
  • Tag与Tagging

    2009-10-15 12:59:00
  • W3C优质网页小贴士(四)

    2008-04-17 13:34:00
  • Mootools 1.2教程(15)——滚动条(Slider)

    2008-12-09 17:35:00
  • 中文段首不需要空两格

    2010-04-23 20:31:00
  • 简评:JavaScript将成Silverlight的最大对手?

    2008-10-17 10:29:00
  • SQL Server 日期相关资料详细介绍

    2012-07-11 16:14:07
  • xmlhttp 乱码 比较完整的解决方法 (UTF8,GB2312)

    2008-05-02 21:02:00
  • ASP把数字用逗号每3位隔开显示代码

    2008-01-02 13:11:00
  • asp之家 网络编程 m.aspxhome.com