CSS可通過設置字體透明度來實現文本效果上的變化,包括使文本透明、半透明或變灰。使用opacity屬性可以控制元素(包括文本)的不透明度,取值范圍為0 - 1,其中0代表完全透明,1代表完全不透明,中間的值便是不同程度的透明。
/* 設置文本透明度為50% */ p { opacity: 0.5; } /* 設置文本透明度為25% */ p { opacity: 0.25; } /* 設置文本完全透明 */ p { opacity: 0; }
除了使用opacity屬性外,還可以使用RGBA顏色值實現字體透明。RGBA顏色值由紅、綠、藍和透明度(alpha通道)的取值組成,透明度的取值范圍同樣為0 - 1。
/* 設置文字顏色為紅色,透明度為50% */ p { color: rgba(255, 0, 0, 0.5); } /* 設置文字顏色為綠色,透明度為25% */ p { color: rgba(0, 255, 0, 0.25); } /* 設置文字顏色為藍色,完全透明 */ p { color: rgba(0, 0, 255, 0); }
字體透明是一種很常用的效果,在設計中可以起到很好的裝飾和調節效果的作用。但需要注意的是,如果給圖片添加透明屬性,IE瀏覽器只能支持透明度為數值的方式,也就是opacity屬性。因此在使用的時候,需要針對不同瀏覽器進行兼容性處理。