[CSS3 を使ってみる：第六回] 透明度を持った色相・彩度・輝度の色を指定する(hsla)

background や color、border などに hsla 指定をすると、透明度を持った色相・彩度・輝度の色を描画できる。

◆background で hsla を使用した場合のプロパティ

background: hsla(色相, 彩度, 輝度, 透明度);
※色相は 0〜360 の整数値で指定する。0 もしくは 360 が赤、120 が緑、240 が青となる。% 指定はできない。
※彩度は 0%〜100% の整数値で指定する。
※輝度も 0%〜100% の整数値で指定する。Photoshop で言う「明度」なので、0% が黒、100% が白となる。
※透明度は 0〜1 の数値で指定する。80% の場合は 0.8 でもいいし、.8 でもいい。こちらは % 指定はできない。

以下は左の div (id: hsla1) に background で青の透明度 50%、真ん中の div (id: hsla2) に background-color で白の透明度 85% を指定し、右の div (id: hsla3) には background-color で黒の透明度 70% で指定してある。全ての div に文字色である color で赤の透明度 50% と枠の border で緑の透明度 35% を指定している。

#hsla1, #hsla2, #hsla3 {
  color: hsla(0, 100%, 50%, .5);
  border: 3px solid hsla(120, 100%, 50%, .35);
}
#hsla1 {background: hsla(240, 100%, 50%, .5);}
#hsla2 {background-color: hsla(240, 100%, 100%, .85);}
#hsla3 {background-color: hsla(240, 100%, 0%, .7);}

するとこうなる。透明度を与えたスタイルが透けていることが判る。


確認環境：
Safari 5.0、Firefox 3.6.3、Chrome 5.0.375.70、Opera 10.53

W3C：
CSS Color Module Level 3