アルファチャンネルを使った透明度の設定：FirefoxとSafariのCSS対応

半透明にしたものを重ねる

　半透明にしたものを複数重ねることも可能だ。たとえば、<div>の背景と文字の色を半透明にすると、次のように文字の下にも青い横縞が透けて見えることがわかる。

　ここでは、文字の色を白くしてアルファチャンネルを「0.5」と指定し、白色の背景の透明度を少しずつ変えている。文字部分のアルファチャンネルの値は「0.5」で固定しているので、透け具合が変化しているということは、文字部分には白い半透明の背景と青い横縞の背景の両方が透けて合成されているということになる。

Firefox 3の表示

Safari 3の表示

div.samp1	{
	background-color: rgba(255,255,255,0.8); 
	color: rgba(255,255,255,0.5); 
	}

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

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

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

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