CSS3顏色不透明度的設(shè)置方法【web前端】

　　在CSS3之前，我們?cè)O(shè)置顏色的方式包含十六進(jìn)制顏色(如#F00)、rgb模式顏色、或指定顏色的英文名稱(如red)，但這些方法無(wú)法改變顏色的不透明度。在CSS3中新增了兩種設(shè)置顏色不透明度的方法，一種是使用rgba模式設(shè)置，另一種是使用opacity屬性設(shè)置。下面將詳細(xì)講解兩種設(shè)置方法。

　　1. rgba模式

　　rgba是CSS3新增的顏色模式，它是rgb顏色模式的延伸。rgba模式是在紅、綠、藍(lán)三原色的基礎(chǔ)上添加了不透明度參數(shù)，其語(yǔ)法格式如下。

rgba(r,g,b,alpha);

　　上述語(yǔ)法格式中，前三個(gè)參數(shù)與RGB中的參數(shù)含義相同，括號(hào)里面書寫的是rgb的顏色色值或者百分比，alpha參數(shù)是一個(gè)介于0.0(完全透明)和1.0(完全不透明)之間的數(shù)字。

　　例如，使用rgba模式為p標(biāo)簽指定透明度為0.5，顏色為紅色的背景，代碼如下。

p{background-color:rgba(255,0,0,0.5);}

或

p{background-color:rgba(100%,0%,0%,0.5);}

　　2. opacity屬性

　　opacity屬性是CSS3的新增屬性，該屬性能夠使任何元素呈現(xiàn)出透明效果，作用范圍要比rgba模式大得多。opacity屬性的語(yǔ)法格式如下。

opacity：參數(shù);

　　上述語(yǔ)法中，opacity屬性用于定義標(biāo)簽的不透明度，參數(shù)表示不透明度的值，它是一個(gè)介于0~1之間的浮點(diǎn)數(shù)值。其中，0表示完全透明，1表示完全不透明，而0.5則表示半透明。    



猜你喜歡：

黑馬程序員web前端視頻教程：HTML5+CSS3教程下載

什么是css盒子，在網(wǎng)頁(yè)中起到什么作用？

常用css樣式大全[2020最新整理版]

黑馬程序員web前端培訓(xùn)課程