CSS3中使用RGBA設(shè)置透明度的示例
WEB前端開發(fā) 發(fā)布時(shí)間：2015-08-04 17:24:44 作者：佚名 
我要評論
我要評論這篇文章主要介紹了CSS3中使用RGBA設(shè)置透明度的示例,即在傳統(tǒng)的RGB值上增添調(diào)節(jié)透明度的Alpha值,需要的朋友可以參考下
說明：
RGBA(R,G,B,A)
取值：
R：紅色值。正整數(shù) | 百分?jǐn)?shù)
G：綠色值。正整數(shù) | 百分?jǐn)?shù)
B：藍(lán)色值。正整數(shù) | 百分?jǐn)?shù)
A：Alpha透明度。取值0~1之間。
下面是用rgba() 設(shè)置50%透明度的白色.
CSS Code復(fù)制內(nèi)容到剪貼板
- p {
- color: rgba(255, 255, 255, 0.5);
- }
RGBA是RGB色彩模型的一個(gè)擴(kuò)展。這個(gè)縮寫詞代表紅綠藍(lán)三原色的首字母，Alpha值代表顏色的透明度/不透明度。
RGBA色彩表示法的格式為：:
CSS Code復(fù)制內(nèi)容到剪貼板
- rgba(red, green, blue, alpha)
前三個(gè)值（紅綠藍(lán)）的范圍為0到255之間的整數(shù)或者0%到100%之間的百分?jǐn)?shù)。這些值描述了紅綠藍(lán)三原色在預(yù)期色彩中的量。
如果你想設(shè)置純紅色，那么把red參數(shù)設(shè)置滿，即255，綠，藍(lán)設(shè)置0即可。
CSS Code復(fù)制內(nèi)容到剪貼板
- background-color: rgba(255, 0, 0, 1);
結(jié)果:
也可使用百分比:
CSS Code復(fù)制內(nèi)容到剪貼板
- background-color: rgba(100%, 0%, 0%, 1);
結(jié)果:
第四個(gè)值, alpha, 制定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間
下面的例子是設(shè)置50%透明度的黃色:
CSS Code復(fù)制內(nèi)容到剪貼板
- color: rgba(255, 242, 0, 0.5);
結(jié)果:
相關(guān)文章
CSS3之前漸變色圖片只能用背景圖片，CSS3的漸變色語法可以讓我們省去下載圖片的開銷，并且在改變?yōu)g覽器分辨率時(shí)有更好的效果，這里就為大家介紹一下,需要的朋友可以參考下2020-03-06CSS3解決移動頁面上點(diǎn)擊鏈接觸發(fā)色塊的問題
移動瀏覽器中頁面點(diǎn)擊某個(gè)元素時(shí)會出現(xiàn)閃動的色塊,也算是比較常見的問題了,這里我們就來講通過-webkit-tap-highlight-color:rgba(0,0,0,0)屬性來用CSS3解決移動頁面上點(diǎn)擊2016-06-03CSS3中使用RGBa來調(diào)節(jié)透明度的教程
這篇文章主要介紹了CSS3中使用RGBa來調(diào)節(jié)透明度的教程,RGBA是RGB色彩模型的一個(gè)擴(kuò)展,這個(gè)縮寫詞代表紅綠藍(lán)三原色的首字母,Alpha值代表顏色的透明度或者說不透明度,需要的朋2016-05-09- 我們今天需要討論的RGBA。如果需要更詳細(xì)的解說，大家就跟著我一起往下看吧2013-08-06
這篇文章主要介紹了CSS3 rgb and rgba（透明色）的使用詳解，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-09-25
