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