CSS3學習筆記——顔色相關樣式

利用alpha通道來設定顔色

1.對RGB顔色設定alpha通道

C3中可以通過alpha通道的方法來定義RGBA顔色；

RGBA顔色：指的是紅色值、綠色值、藍色值、alpha通道值來定義的顔色

通道範圍為0-1.0,0表示完全透明，1表示不透明；

background-color：rgba(255,0,0,0.5);

2.對HSL顔色設定alpha通道

HSLA顔色指的是利用色調（H）、飽和度（S）、亮度（L）、alpha通道（A）來定義顔色；

色調值：用0或360表示紅色；120表示綠色；240表示藍色；

飽和度和亮度的取值範圍均為0%到100%；

background-color:hsla(120,100%,50%,0.5);

3.alpha通道與opacity屬性的差別

opacity屬性用來指定透明度的，取值範圍在0-1,0表示完全透明，1表示不透明；

alpha通道對元素設定透明度時，可以單獨對元素的背景色和文字顔色等指定透明度；而opacity屬性隻能指定整個元素的透明度；

4.指定顔色值為transparent

transparent屬性會将背景、文字、或邊框等的顔色設定為完全透明，相當于使用了值為0的alpha通道；

C3中可以在一切指定顔色值的屬性中指定transparent值；