在CSS中,我們可以使用透明度屬性來(lái)控制顏色透明度。透明度屬性是opacity,取值范圍從0到1,0表示完全透明,1表示完全不透明。例如:
div { background-color: rgba(255, 255, 255, 0.5); opacity: 0.8; }
上述代碼表示div元素的背景色為白色,透明度為0.5(即50%不透明),而整個(gè)元素又加上了0.8的透明度,在整個(gè)頁(yè)面中只占了80%的不透明度。
另外,我們也可以使用rgba顏色值來(lái)設(shè)置顏色和透明度。RBGA顏色值由顏色的RGB三個(gè)分量和透明度alpha值組成,范圍同樣是0到1。例如:
div { background-color: rgba(255, 0, 0, 0.5); }
上述代碼表示div元素的背景顏色為紅色,透明度為0.5。這里需要注意的是,當(dāng)我們用rgba來(lái)設(shè)置顏色時(shí),需要在顏色值的后面加上alpha值。
在實(shí)際開(kāi)發(fā)中,顏色透明度的應(yīng)用非常廣泛。如果我們需要實(shí)現(xiàn)類似于背景圖半透明的效果,或者需要在某個(gè)元素上面覆蓋半透明的黑色遮罩層,這時(shí)我們就可以使用顏色透明度屬性。