背景の透明化

有限会社キートンはマニュアル制作(テクニカルライティング/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を使う人はほとんどの場合、最新版を使うだろうという判断です。

ページトップに戻る