html5中文学习网

您的位置: 首页 > 视频教程 > CSS3视频教程 » 正文

玩转CSS3色彩_HTML5中文网 - 我们以促进HTML5在中国的普及而努力

[ ] 已经帮助:人解决问题

传统来说,大家在CSS中使用的颜色要么是16进制格式,要么是rgb格式,就像rgb(171,205,239)。3NfHTML5中文学习网 - HTML5先行者学习网

 3NfHTML5中文学习网 - HTML5先行者学习网

3NfHTML5中文学习网 - HTML5先行者学习网
 

CSS3带来了一些新的处理颜色的方法,比如使用HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,现在只有Firefox 3+, Chrome 1.0+ 和Safari 3+ 以及一些衍生的浏览器完全支持它们。但是我们可以尽我们所能,而IE直到Internet Explorer 9才会开始支持一些CSS3属性。3NfHTML5中文学习网 - HTML5先行者学习网

Opacity3NfHTML5中文学习网 - HTML5先行者学习网

这其实是一个旧属性,令人惊奇的是,它被IE的当前版本支持——尽管是以一种比较复杂的方法。3NfHTML5中文学习网 - HTML5先行者学习网

Opacity将整个CSS 对象变透明,所有的子元素的透明度也会适当的继承。官方的语法如下:3NfHTML5中文学习网 - HTML5先行者学习网

 opacity: [0-1的小数]; 3NfHTML5中文学习网 - HTML5先行者学习网

所以一个opacity: 0.5;设置会让对象50%透明。尽管较新的浏览器积极的支持它,老的浏览器还是需要一些定制的代码,就像IE浏览器一样。3NfHTML5中文学习网 - HTML5先行者学习网

目前较老的Firefox版本,我们需要使用-moz-前缀,而对于旧的Safari/Chrome版本,我们需要使用-webkit-前缀。而对于更老的还在使用KHTML内核而不是webkit内核的Safari版本来说,我们需要使用-khtml-。那么如果我们想支持每一个浏览器,我们的代码应该是这样的:3NfHTML5中文学习网 - HTML5先行者学习网

opacity: 0.5;3NfHTML5中文学习网 - HTML5先行者学习网
-moz-opacity: 0.5;3NfHTML5中文学习网 - HTML5先行者学习网
-webkit-opacity: 0.5;3NfHTML5中文学习网 - HTML5先行者学习网
-khtml-opacity: 0.5;
3NfHTML5中文学习网 - HTML5先行者学习网

啊,稍等!IE怎么办?好吧,IE的确完全不支持这个,但是它使用了一个私有的滤镜。传统的方法简短扼要:3NfHTML5中文学习网 - HTML5先行者学习网

filter:alpha(opacity=50); 3NfHTML5中文学习网 - HTML5先行者学习网

请注意对于IE我们需要使用从0到100的整数,而不是像opacity属性那样的小数。郁闷的是,Internet Explorer 8提供了一个新的方法来处理。不要尝试像另一个那样记住这个,这是很长的一个:3NfHTML5中文学习网 - HTML5先行者学习网

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; 3NfHTML5中文学习网 - HTML5先行者学习网

当然,如果你想支持旧的IE浏览器,你将不得不使用上面的那个短的,这也就意味着如果要兼容绝大部分浏览器,你需要总共六条CSS语句。3NfHTML5中文学习网 - HTML5先行者学习网

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的前面。——神飞3NfHTML5中文学习网 - HTML5先行者学习网

(责任编辑:admin)
(责任编辑:)
推荐书籍
推荐资讯
关于HTML5先行者 - 联系我们 - 广告服务 - 友情链接 - 网站地图 - 版权声明 - 人才招聘 - 帮助