加入收藏 | 设为首页 | 会员中心 | 我要投稿 湖南网 (https://www.hunanwang.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 创业 > 正文

教你玩转CSS3色彩

发布时间:2018-09-09 16:02:36 所属栏目:创业 来源:站长网
导读:传统来说,各人在CSS中行使的颜色要么是16进制名目,要么是rgb名目,就像rgb(171,205,239)。 CSS3带来了一些新的处理赏罚颜色的要领,好比行使HSL(Hue, Saturation, Light) 和opacity/alpha通道。不幸的是,此刻只有 Firefox 3+, Chrome 1.0+ 和 Safari 3+ 以

传统来说,各人在CSS中行使的颜色要么是16进制名目,要么是rgb名目,就像rgb(171,205,239)。

教你玩转CSS3色彩

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.5;配置会让工具50%透明。尽量较新的赏识器起劲的支持它,老的赏识器照旧必要一些定制的代码,就像IE赏识器一样。

今朝较老的Firefox版本,我们必要行使-moz-前缀,而对付旧的Safari/Chrome版本,我们必要行使-webkit-前缀。而对付更老的还在行使KHTML内核而不是webkit内核的Safari版原来说,我们必要行使-khtml-。那么假如我们想支持每一个赏识器,我们的代码应该是这样的:

啊,稍等!IE怎么办?好吧,IE简直完全不支持这个,可是它行使了一个私有的滤镜。传统的要领简短简要:

请留意对付IE我们必要行使从0到100的整数,而不是像opacity属性那样的小数。忧郁的是,Internet Explorer 8提供了一个新的要领来处理赏罚。不要实行像另一个那样记着这个,这是很长的一个:

虽然,假如你想支持旧的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的前面。——神飞

译自:Playing Around with CSS3 Colors
中文:玩转CSS3色彩

(编辑:湖南网)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    热点阅读