CSS中RGBA 和opcity改變透明度的區別

2021-09-24 04:28:56 字數 514 閱讀 6209

在製作一些半透明的小圖示的時候,有兩種方法使不透明的圖示變半透明,下面看一下兩者的區別

rgba()

在rgba模式中,前三個引數是控制顏色,最後乙個引數控制透明度

最後乙個引數在0—1之間,可以是小數。當它為0時代表完全透明,為1代表不透明

opcity

opcity也可以調整透明度,取值範圍也在0—1之間,當它為0時代表完全透明,為1代表不透明

下面來看一張圖看他們之間的區別

通過可以看到,使用rgba()改變透明度的時候,不會改變文字的透明度,而使用opcity改變透明的的時候,文字的透明度也會被一起改變。

lang

="zh"

>

>

>

title

>

CSS學習筆記 RGBA與HSLA

在css3中可以使用rgba和hsla兩種色彩模式,二者均可以用來在設定顏色的同時也指定其透明度。hsla指的是 色調 飽和度 亮度 alpha透明度 其中,alpha的取值從0 1 0代表完全透明,1代表完全不透明。css3仍有opacity屬性,但它的作用是使整個元素都半透明,包括前景內容,而不...

opengl中的RGBA顏色

rgba模式中,每乙個畫素會儲存以下資料 r值 紅色分量 g值 綠色分量 b值 藍色分量 和a值 alpha分量 其中紅 綠 藍三種顏色相組合,就可以得到我們所需要的各種顏色,而alpha不直接影響顏色,它將留待以後介紹。在rgba模式下選擇顏色是十分簡單的事情,只需要乙個函式就可以搞定。glcol...

rgba 和opacity的使用

rgba 表示 紅 綠 藍 alpha w3c指在原有的rgb顏色模型之後增加了 alpha 引數,可以讓制定的顏色透明化 rgb 上擴充套件的,其只可以設定顏色,而不能使設定的顏色透明化 例子 rgba 55,146,179,5 rgb值為 55,146,179 5使設定的rgb值為50 透明,1...