背景の透明化

有限会社キートンはマニュアル制作（テクニカルライティング／DTP）をはじめ、コピーライティング、Webサイトの構築などを行う企画・制作会社です。
特にWebサイトの構築ではユニバーサルデザイン化を積極的に推進し、正しい文法に基づくHTML+CSSで、アクセシブルかつ検索性の高いサイトを構築しています。

CSS3ではRGBaプロパティバリューが使えるようになりました。
RGBaプロパティバリューはFirefox 3以上，Safari 3以上，Opera 10以上，~~IE8以上，~~Chromeがサポートしています。IE8もRGBaに対応していません。
しかしIE6やIE7、モダンブラウザでも古いバージョンはこれらのプロパティに対応していないため、各ブラウザ独自のプロパティを使って実現します。

HTML

<div class="sample">
	<p>テキスト</p>
</div>

CSS

div.sample {
	background: #fff url(bg.jpg) no-repeat left center;
	padding: 3em;
	border:1px solid #999;
}

div.sample p {
	color: #fff;
	padding: 2em;
	border: 1px solid #ccc;
	background-color: #fff;
	filter: alpha(opacity=50);			/* for IE6, IE7 */
	-moz-opacity: 0.5; 				/* for Netscape, Firefox1.5 Ealier */
/*	opacity: 0.5; 					CSS3 for Over FF2, Safari2, Opera9, IE8 */
	background-color: rgba(256,256,256,0.5);	/* CSS3 for Over FF3, Safari3, Opera10, IE8 */
	background-color: rgba(255,255,255,0.5);	/* CSS3 for Over FF3, Safari3, Opera10, IE8 */
}

※上記RGBの値は256ではなく255の間違いでした。メールでご指摘いただいた方、ありがとうございました。（2012.4.11）

問題点

上記サンプルではFirefox 2，Safari 2，Opera 9は対応できていません。対応するにはOpacityプロパティを使ってもいいのですが、Opacityプロパティは背景だけでなく文字も透明化されてしまいます。

このため、上記のようにOpacityプロパティはコメントアウトしているのですが、もう一つの大きな理由はFirefox，Safari，Operaを使う人はほとんどの場合、最新版を使うだろうという判断です。