“rgba()”関数

“rgba()”関数

“rgba()”関数はRGBカラー・モデルの赤、緑、青の色成分と透明度を表すアルファ値で色を指定するための関数です。“<color>”値として使用することができます。

“CSS Color Module Level 3”まではアルファ値を含まない色が“rgb()”関数、アルファ値を含む色が“rgba()”関数と区別されていましたが、“CSS Color Module Level 4”では“rgba()”関数は“rgb()”関数の別名として定義され、区別がなくなりました

“rgba()”関数の構文

赤、緑、青の色成分とアルファ値を表す4個の引数を順番にコンマ(“,”)で区切って記述します。

rgba(〚赤〛,〚緑〛,〚青〛,〚アルファ値〛)


最初の3個の引数は順番に赤、緑、青の色成分を表します。引数は“<percentage>”値、もしくは“<number>”値が使用できます。

“<percentage>”値で引数を指定する場合

“0%”が色成分の最低値を表し、“100%”が最大値を表します。

“<number>”値で引数を指定する場合

“0”が色成分の最低値を表します。最大値は“255”で表されます。

4個目の引数は色の透明度を示すアルファ値を表します。アルファ値は“<alpha-value>”値で表します。

使用例

.purple-100p { background-color: rgba(198,111,170,100%);}
.purple-90p { background-color: rgba(198,111,170,90%);}
.purple-80p { background-color: rgba(198,111,170,80%);}
.purple-70p { background-color: rgba(198,111,170,70%);}
.purple-60p { background-color: rgba(198,111,170,60%);}
.purple-50p { background-color: rgba(198,111,170,50%);}
.purple-40p { background-color: rgba(198,111,170,40%);}
.purple-30p { background-color: rgba(198,111,170,30%);}
.purple-20p { background-color: rgba(198,111,170,20%);}
.purple-10p { background-color: rgba(198,111,170,10%);}
.purple-0p { background-color: rgba(198,111,170,0%);}


100%	90%	80%
70%	60%	50%
40%	30%	20%
10%	0%

仕様書

定義されている仕様書

rgba()