1 關於opacity或RGBA設定顏色值

2022-05-16 10:10:27 字數 509 閱讀 2909

opacity宣告來設定元素的透明值(改透明度的值介於0-1之間的小數, 0.5表示50%透明)。

opacity的特點是:當opacity設定元素的透明值,內部的文字及元素也會透明

.demo
注:這段**class為demo的標籤元素的透明值為30%,裡面的文字及元素透明值也會變成30%

rgba也是用來設定顏色的。

r:紅色值  正整數 | 百分數

g:綠色值  正整數 | 百分數

b:藍色值  正整數 | 百分數 

a:透明度 (取值0-1之間)

通過rgba設定的顏色值只針對當前元素,內部的文字及元素的透明值並未發生變化

.demo
注:這段**class為demo的標籤元素的透明值為30%,裡面的文字及元素透明值無任何變化。

rgba設定顏色值 瀏覽器支援性:

rgba 和opacity的使用

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

rgba 和opacity的使用

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

rgba與opacity的異同

相同之處 都可以實現改變元素的透明度 不同之處 rgba opacity 影響範圍 自身自身 後代元素 使用範圍 實現背景透明,文字不透明 使用方法 rgba r,g,b,a opacity value inherit rgba只會改變自身透明度,而opacity除了改變自身透明度外,其所有後代還會...