CSS3教程:在CSS中使用的颜色

老子决心要逆天

老子决心要逆天

2016-02-20 00:15

最近很多朋友喜欢上设计,但是大家却不知道如何去做,别担心有图老师给你解答,史上最全最棒的详细解说让你一看就懂。

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

传统来说,大家在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浏览器一样。

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

目前较老的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);

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

请注意对于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的前面。神飞

展开更多 50%)
分享

猜你喜欢

CSS3教程:在CSS中使用的颜色

Web开发
CSS3教程:在CSS中使用的颜色

CSS3教程(10):CSS3 HSL声明设置颜色

Web开发
CSS3教程(10):CSS3 HSL声明设置颜色

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS3系列教程:边框颜色

Web开发
CSS3系列教程:边框颜色

CSS3教程(7):CSS3嵌入字体

Web开发
CSS3教程(7):CSS3嵌入字体

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

CSS3教程(1):什么是CSS3

Web开发
CSS3教程(1):什么是CSS3

CSS3教程(9):设置RGB颜色

Web开发
CSS3教程(9):设置RGB颜色

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

CSS3制作的精彩的网页实例教程

CSS3制作的精彩的网页实例教程

Win10升级预览版9926出现0x80070002错误提示怎么办?

Win10升级预览版9926出现0x80070002错误提示怎么办?
下拉加载更多内容 ↓