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

　前回はアルファチャンネルを使った透明度の設定について紹介したが、透明度はopacityプロパティでも指定することができる。opacityプロパティはFirefoxやSafariでもバージョン3以前から対応しているので、今回はアルファチャンネルとopacityプロパティの違いについて見ていきたいと思う。また、Firefox 3が新しく対応したCSS 3のtransparentの処理についても紹介する。

　なお、透明度に関する規格については、CSS 3の勧告候補CSS3 Color Moduleを参考にしている。

　また、今回からは先週リリースされたFirefox 3のBeta 3を利用する。Beta 3では、第3回「CSSで罫線を角丸で表示する（1）」で紹介した「背景画像の角丸表示」に対応したので、確認してほしい。

アルファチャンネルとopacityの違い

　opacityは透明度を指定するために用意されたCSS 3のプロパティで、アルファチャンネルと同じ値（0〜1.0）を指定することができる。現在のところ、Firefox、Safari、Operaが対応している。

　アルファチャンネルが要素の背景色や文字の色の透明度を個別に指定するのに対して、opacityプロパティは要素全体の透明度を指定する。

　たとえば、以下のサンプルでは<div>の背景を緑色に、文字を白色に設定し、上から順に［1］〜［4］のように透明度を指定した。

• ［1］透明度を指定していないもの
• ［2］<div>の背景のアルファチャンネルを「0.5」に指定したもの
• ［3］<div>の背景と文字のアルファチャンネルを「0.5」に指定したもの
• ［4］<div>に「opacity:0.5」を適用したもの

Firefox 3の表示

Safari 3の表示

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

div.samp1	{
	background-color: rgb(0,255,100); 
	color: rgb(255,255,255);
	}

div.samp2	{
	background-color: rgba(0,255,100,0.5); 
	color: rgb(255,255,255);
	}

div.samp3	{
	background-color: rgba(0,255,100,0.5); 
	color: rgba(255,255,255,0.5);
	}

div.samp4	{
	background-color: rgb(0,255,100); 
	color: rgb(255,255,255);
	opacity: 0.5;
	}

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

　［2］の表示を見ると、背景色のアルファチャンネルの指定は文字の表示には影響しないことがわかる。文字も半透明にするためには、［3］のように背景と文字に対してそれぞれアルファチャンネルを指定しなければならない。しかし、opacityを指定した［4］では、文字も背景も半透明になっていることがわかる。

　一方、［3］と［4］ではどちらも背景と文字が半透明になっているが、半透明になった文字の下に、［3］は緑色の背景が透けて見えているのに対して、［4］は見えていないことがわかる。これが、アルファチャンネルとopacityプロパティの処理の違いだ。

　CSS 3では、opacityプロパティは、RGBAの処理の後に適用するものと定義されている。この定義によると、opacityを指定した要素はまず、子要素も含めてRGBAでレンダリングされ、オフスクリーンイメージとなる。その後、オフスクリーンイメージをページに表示するときに、opacityで指定した透明度を適用することになっている。

　［4］の場合はアルファチャンネルを指定していないので、RGBAによるレンダリング結果は［1］のようになる。これをオフスクリーンイメージとして扱い、opacityで指定した透明度で表示すると［4］になるというわけだ。

　なお、Operaで表示した場合、［4］はFirefoxやSafariの［3］と同じ表示になり、opacityの処理が異なっていることがわかる。

Operaにおける［4］の表示