玩转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的前面。——神飞
猜你喜欢
- 代码如下:Set Catalog_object= Server.CreateObject("ADO
- BIT[(M)]位字段类型。M表示每个值的位数,范围为从1到64。如果M被省略, 默认为1。TINYINT[(M)] [UNSIGNED]
- 很多时候关心的是优化SELECT 查询,因为它们是最常用的查询,而且确定怎样优化它们并不总是直截了当。相对来说,将数据装入数据库是直截了当的
- 在Firefox推出3.5后,他增加了许多新的支持,今天抽空将他们整理一下。属性image-renderingtext-renderingi
- 下列语句部分是Mssql语句,不可以在access中使用。SQL分类:DDL—数据定义语言(CREATE,ALTER,DROP,DECLAR
- 游标的使用提到游标这个词,人们想到的是在屏幕上一个闪动的方框,用以指示用户将要输入字符的位置。而在关系型数据库的SQL语言中,游标却有另外的
- HTML 的空白符处理规则HTML 中的“空白符”包括空格 (space)、制表符 (tab)、换行符 (CR/LF) 三种。我们知道,在默
- 在做视觉设计时,如何高效地使用图标是一门学问:该使用什么样的图标?图标该放在哪里?大小如何?图标的使用是否帮助用户更好更快的理解内容,亦或是
- 例如:将日期格式为2009-6-8的转换为2009-06-08,给小于10的数字补上一个0方法一:year(now)
- 在windows下的解决办法如下: 1.net stop mysql 停用服务 &
- 最近接触到Tencent的广告越来越多,户外广告牌和电视上都是,可以明显感觉到Tencent的扩张野心,以及对QQ品牌定位的重塑。摆脱低龄化
- 目录:分析和设计组件编码实现和算法用 Ant 构建组件测试 JavaScript 组件话说上期我们讨论了队列管理组件的设计,并且给它取了个响
- 什么是品牌的视觉传达品牌,这个熟悉而又陌生的名词,有时总会让人产生误解。品牌很广,广到一个意会颇深的战略发展理念;品牌很小,小到一个清晰可见
- 在 CodeBit.cn 的论坛中,有人问 Javascript 中如何截取小数位并实现四舍五入,这是一个很常用的 js 技术,帖子中也有网
- 1. 你必须有自己的服务器,可以在服务器上建立站点。2. 域名管理里 你的域名必须支持泛解析。(现在好像除了 双线双I
- Microsoft SQL Server 2000的会话上下文信息使应用程序得以设置二进制值,以便在同一会话或连接上运行的多个批处理、存储过
- 1.SQL Server 2005中的存储过程并发问题问:我在SQL Server2005中遇到了并发问题。我持有车票的公共汽车上有一些空闲
- 先声明一下,这是本人在某个项目中用到的,本人自己写的,如有雷同纯属巧合。同时也欢迎高人指正。这种星级的投票效果很常见,但是目前线上大多都是通
- 众所周知IE6不支持position:fixed,这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己
- 如果在 Access 数据库中删除数据或对象,或者在 Access 项目中删除对象,Access 数据库或 Access 项目可能会产生碎片