1. 程式人生 > >css實現透明的兩種方式及其區別

css實現透明的兩種方式及其區別

白色 class 子節點 new 透明度 區別 方式 ron pre

一、opacity:0~1

值越高,透明度越低,下面為示例

選擇器{
opacity:0.5    
}

選擇器匹配到的節點們,包括節點們的孩子節點,都會實現%50透明,另 0.5 可直接寫成 .5

二、rgba(0~255,0~255,0~255,0~1)

rgba(R,G,B,A) 其中R、G、B分別對應著紅綠藍,此處不細說。A則為透明度,規則如一,下面為示例

選擇器{
background-color:rgba(0,0,0,0.5);
}

選擇器匹配到的節點們,當且僅當匹配到的節點,不包括其孩子節點,透明度為50%,(0,0,0)表黑色,而(255,255,255)表白色。

css實現透明的兩種方式及其區別