玩转CSS3的颜色

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

前面我们整了一个有关于CSS3的颜色属性的教程《CSS3 RGBA》,在这个教程中主要介绍了CSS3的RGBA属性的使用。传统上,我们给CSS设置颜色一般都是十六进制和rgb格式,比如“#abcdef”,而使用相对应的RGB应该就是“brg(171,205,239)”。

CSS3的到来,在CSS样式中,我们增加了一些其他的颜色控制方式,比如:HSL(H:色调,S:饱和度,L:亮度)和透明度apacity。不幸的是,现在CSS3的这些属性只有Firefox3+,Opera10+,Chrome1.0+和Safari3+支持,而在IE6-8是不支持这些属性,但Internet Explorer 9开始支持这些属性。

下面我们一起再来了解一些CSS3的颜色其它属性的使用。

一、Opacity

Opacity是用来设置元素的透明度,官方是这样指定的Opacity使用方法:

		opacity: [number between 0-1];
	

因此,设置一个对象的透明度:

		.elm {opacity: 0.5;}
	

上面代码表达的意思是将一个对象设置不透明度为50%,将使用对象50%为透明。这个属性在现代浏览器中是完全支持,但在一些旧版本的浏览器中我们是需要使用一些特殊方法来处理。所以我们如果想所有不同版本支持Opacity的使用,我们必须这样使用:

		.elm {
			opacity: 0.5;
			-moz-opacity: 0.5;
			-webkit-opacity: 0.5;
			-khtml-opacity: 0.5;
			filter:alpha(opacity=50);
			-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
		}
	

使用Opacity最不好的一个地方就是在元素中设置了透明度,元素所有后代元素都会受影响,都具有相同的透明度。

Opacity的扩展阅读:

  1. opacity
剩余80%内容付费后可查看
* 请输入阅读码(忘记阅读码?

如需转载,烦请注明出处:https://www.w3cplus.com/css3/playing-with-css3-colors

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部