空间
在css3之前,在样式中指定的颜色值只能为RGB颜色值,并且只能通过opacity属性来设置元素的透明度。CSS3中增加了3种颜色值-RGBA颜色值,HSL颜色值及HSLA颜色值,并且允许通过对RGBA颜色值和HSLA颜色值设定alpha通道的方法来更加容易地实现将半透明文字与图像互相重叠的效果。
一.颜色相关样式
1.利用alpha通道来设定颜色
(1)对RGB颜色设定alpha通道
在css3中,可以通过对RGB颜色设定alpha通道的方法来定义RGBA颜色。所谓RGBA颜色,是指利用红色值(R),绿色值(G),蓝色值(B),alpha通道值(A)来定义的颜色。其中,alpha通道值的范围为0-1.0,0表示完全透明,1表示不透明。使用方法如下所示:
background-color: rgba(255,0,0,0.5);
(2)对HSL颜色设定alpha通道
在css3中,除了可以使用RGB颜色外,还可以使用HSL颜色。HSL颜色使用色调(H),饱和度(S),亮度(L)来定义颜色。其中,色调值中用0或360表示红色,120表示绿色,240表示蓝色,当取值大于360时,实际的值等于该值除以360之后的余数。饱和度和亮度的取值范围均为0%到100%。可以通过对HSL颜色设定alpha通道的方法来定义HSLA颜色。HSLA颜色是指利用色调(H),饱和度(S),亮度(L),alpha通道值(A)来定义颜色。
2.alpha通道与opacity属性的区别
opacity属性时css中专门用来指定透明度的一个属性,取值范围也在0-1之间,0表示完全透明,1表示不透明。使用alpha通道对元素设定透明度时,可以单独针对元素的背景色和文字颜色等来指定透明度,而opacity属性只能指定整个元素的透明度。
3.指定颜色值为transparent
如果将颜色值指定为transparent,则会将背景,文字或边框等的颜色设定为完全透明,相当于使用了值为0的alpha通道。也就是说,在css3中,可以在一切指定颜色值的属性中指定transparent值。