サイトアイコン WEB-Geek-Site.com

rgba( ) |CSSリファレンス


[ rgba( ) ]

 

RGBAカラーモデルで色を指定する。

カンマ( , )区切りにした3つの数値でRGBの色を指定した後に、数値で透明度を指定。
RGBA値をサポートしていないブラウザでは、色指定そのものが認識されずに無効となるので注意が必要。


■値
RGBの色は0-255、または、0%-100%で指定。
透明度は、0(完全に透明)~1(完全に不透明)の数値で指定。


■使用例/CSS

p.sample1 {background-color: rgb(0,0,255);} /* 透明の指定なし */
p.sample2 {background-color: rgba(0,0,255,1);} /* 完全に不透明 */
p.sample3 {background-color: rgba(0,0,255,0.5);} /* 半透明 */
p.sample4 {background-color: rgba(0,0,255,0.1);} /* 薄い透明 */
p.sample5 {background-color: rgba(0,0,255,0);} /* 完全に透明 */ 

■見本

背景色に rgb(0,0,255) を指定

背景色に rgba(0,0,255,1) を指定、完全に不透明

背景色に rgba(0,0,255,0.5) を指定、半透明

背景色に rgba(0,0,255,0.1) を指定、薄い透明

背景色に rgba(0,0,255,0) を指定、完全に透明

モバイルバージョンを終了