CSS3 rgba 透過

rgba、これは色を透過させるcss3のプロパティである。確認ブラウザ、Chrome14.0　Firefox7.0　IE未対応。

プロパティ「rgba」は色の指定の際に使用する。色の三原色のRGBにA(アルファチャンネル)を加えたもので、Aが透過率にあたる。

たとえば、従来、{background:#FFFFFF;}としていたところを、{background:rgba(255,255,255,0.5)}とするだけ。これで、白色を50％透過したものになる。Aには0～1の値を指定する。背景色だけでなく、borderや文字にも適応できる。あと、完全に透明にさせる(アルファチャンネルが0)時はtransparentを指定するといい。これもcss3からはすべての色指定に反映するらしい。

このページにも透過を使っているが、IE8などの透過に対応していないブラウザでは、色の指定そのものがされないことになるので、手前で指定しておく必要があるので注意が必要である。

background:rgba(125,125,125,0.2);

background:rgba(125,125,125,0.4);

background:rgba(125,125,125,0.6);

background:rgba(125,125,125,0.8);

background:transparent;