アルファチャンネルとopacityの違い：FirefoxとSafariのCSS対応

最新特集【一覧】

防水スピーカーをワイヤレス化、お風呂でのんびり音楽を楽しむ

自作バーコードで音楽CDを管理する

Perfumeが公開したダンスのモーションデータをChromeで扱う

transparentの指定

　色の値をtransparentと指定すると、背景や罫線を透明な状態で表示することができる。これは、アルファチャンネルを「0」と指定した場合と同じだ。

　transparentという色の値は、CSS 1ではbackground-colorプロパティで、CSS 2ではbackground-colorとborder-colorプロパティで利用することができたが、CSS 3からは色を指定するすべてのプロパティで利用できるようになっている。

　現在、CSS 3のtransparentの処理に対応しているのは、Firefox 3とSafariだ。たとえば、次のサンプルでは上から順に、background-color、border-color、colorプロパティの値をtransparentと指定している。これをFirefox 3とSafariで表示すると、指定した通りに背景、罫線、文字の色が透明になる。なお、背景は白、罫線は黄色、文字は黒色で表示している。

Firefox 3の表示

Safari 3の表示

body{
background-image: url(back.gif);
}

div.samp1{
background-color: transparent;
}

div.samp2{
border-color: transparent;
}

div.samp3{
color: transparent;
}

※ブラウザで表示を確認する

　Internet Explorer 7やOperaの表示を確認すると、CSS 2で定義された背景と罫線の色は透明になるが、文字の色は透明にならない。また、Internet Explorer 6ではborder-color:transparentと指定すると、罫線が黒色で表示されるという問題があるので、注意が必要だ。

Internet Explorer 7の表示

Operaの表示