教育行業(yè)A股IPO第一股(股票代碼 003032)

全國咨詢/投訴熱線:400-618-4000

CSS3如何設(shè)置顏色不透明度?

更新時間:2020年12月30日18時17分 來源:傳智教育 瀏覽次數(shù):

好口碑IT培訓(xùn)

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

  1. rgba模式

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

rgba(r,g,b,alpha);

  上述語法格式中,前三個參數(shù)與RGB中的參數(shù)含義相同,括號里面書寫的是rgb的顏色色值或者百分比,alpha參數(shù)是一個介于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屬性的語法格式如下。

opacity:參數(shù);

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

猜你喜歡:

如何使用css讓圖片垂直居中?

CSS中display、visiblity及overflow的作用和區(qū)別?【web前端培訓(xùn)】

CSS3新增了哪些選擇器?如何是使用?

傳智教育web前端培訓(xùn)課程

0 分享到:
和我們在線交談!