rgba 和opacity的使用

2021-07-04 12:00:28 字數 613 閱讀 3299

rgba()表示 紅 綠 藍 alpha ,w3c指在原有的rgb顏色模型之後增加了 「alpha」引數,「可以讓制定的顏色透明化」(rgb()上擴充套件的,其只可以設定顏色,而不能使設定的顏色透明化)

例子:rgba(55,146,179,.5) ; 

//rgb值為「55,146,179」,.5使設定的rgb值為50%透明,1為完全不透明,0為完全透明

opacity屬性是css3的屬性,也可以實現透明效果 

例子:opacity:.65; 

//1為完全不透明,0為完全透明 

rgba()和opacity都能實現透明效果,但最大的不同是opacity作用於元素,以及元素內的所有內容的透明度,

而rgba()只作用於元素的顏色或其背景色

兩種都不被ie支援(ie9開始支援)

若要為使瀏覽器兼顧怎麼辦,下面舉例可以解決這個問題:

background:rgb(55,146,179); 

/*for ie*/

background:rgba(55,146,179,.25); 

/*for browsers that support 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...

深入了解opacity和rgba

1.rgba 首先它是乙個屬性值,語法為rgba r,g,b,a r為紅色值,正整數 百分數 g為綠色值,正整數 百分數 b為藍色值,正整數 百分數 a為alpha 透明度 值為0 1之間的小數,0.0 完全透明 到 1.0 完全不透明 上面的正整數為十進位制0 255之間的任意值,百分數為0 10...