萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> DivCSS教程 >> CSS3中使用RGBA設置透明度的示例

CSS3中使用RGBA設置透明度的示例

   說明:

  RGBA(R,G,B,A)

  取值:

  R:紅色值。正整數 | 百分數

  G:綠色值。正整數 | 百分數

  B:藍色值。正整數 | 百分數

  A:Alpha透明度。取值0~1之間。

  下面是用rgba() 設置50%透明度的白色.

  CSS Code復制內容到剪貼板

  p {

  color: rgba(255, 255, 255, 0.5);

  }

  RGBA是RGB色彩模型的一個擴展。這個縮寫詞代表紅綠藍三原色的首字母,Alpha值代表顏色的透明度/不透明度。

  RGBA色彩表示法的格式為::

  CSS Code復制內容到剪貼板

  rgba(red, green, blue, alpha)

  前三個值(紅綠藍)的范圍為0到255之間的整數或者0%到100%之間的百分數。這些值描述了紅綠藍三原色在預期色彩中的量。

  如果你想設置純紅色,那麼把red參數設置滿,即255,綠,藍設置0即可。

  CSS Code復制內容到剪貼板

  background-color: rgba(255, 0, 0, 1);

  結果:

  也可使用百分比:

  CSS Code復制內容到剪貼板

  background-color: rgba(100%, 0%, 0%, 1);

  結果:

  第四個值, alpha, 制定了色彩的透明度/不透明度,它的范圍為0.0到1.0之間

  下面的例子是設置50%透明度的黃色:

  CSS Code復制內容到剪貼板

  color: rgba(255, 242, 0, 0.5);

  結果:

201584173107020.jpg (827×224)
copyright © 萬盛學電腦網 all rights reserved