CSS(層疊樣式表)是網(wǎng)頁(yè)設(shè)計(jì)中不可或缺的一部分。有一種常見的需求,就是需要設(shè)置背景顏色,并且要求這個(gè)背景色是半透明的。這時(shí)候就需要用到CSS3新增的rgba屬性了。
.selector { background-color: rgba(0,0,0,0.5); }
rgba表示紅、綠、藍(lán)三個(gè)顏色通道和alpha透明度通道,取值范圍是0~255,alpha取值范圍是0~1。上面的代碼表示黑色背景的半透明,透明度為50%。
另外一個(gè)常見的需求是設(shè)置文本背景的透明度,可以使用相同的方法。
.selector { color: #fff; background-color: rgba(0,0,0,0.5); }
需要注意的是,rgba屬性只能在現(xiàn)代瀏覽器中使用,IE8及以下版本不支持。
總之,掌握rgba屬性可以為網(wǎng)頁(yè)設(shè)計(jì)增加更多的效果,讓你的頁(yè)面更加引人注目。