スキップナビゲーションリンク

IE 6 透過PNG利用 expression処理の方法と注意点

動作対象環境

動作サンプル

サンプルのみを別窓で表示

サンプルダウンロード

サンプルダウンロード

解説

IE6以下はPNG画像ファイルの透過部分の描画に対応しておらず、透過部分はグレーに表現されます。expressionという機能を利用してこの問題を解消できる場合と、できない場合についてまとめました。

「expression」とはInternet Explorerに独自実装された、いわゆるcssから制御するJavaScriptです。本件のターゲットはIE 6のみなので、cssハックを経由してIE6以下にのみ処理を設定します。

部分透過PNGをimg要素として利用する場合は、そのimg要素の包含要素に「class="pngImg"」を指定します。
一方、部分透過PNGを要素の背景に指定する場合は、その要素に「class="pngBgImg"」と指定することで実装できます。

・ img要素の場合のcss記述(抜粋)

* html body .pngImg{
	filter:expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(~中略~
}
* html body .pngImg img{
	visibility:expression("hidden");
}

・ 背景画像の場合のcss記述(抜粋)

* html body .pngBgImg{
	behavior:expression(
		this.style.behavior||
		(this.style.filter="progid:DXImageTransform.Microsoft.AlphaImageLoader(~中略~
	);
}

背景画像として設定する場合に、背景画像のタイリング(繰り返し background-repeat)を設定してあっても、この機能では画像を1回だけ描画し、repeatの効果は得られません。
また、同じく背景画像として設定する場合に、background-positionで背景画像の位置を制御してあっても、この機能では左上付(0 0)に補正して描画されますので、background-position未対応です。

以上のような対策が必要な場合は、IE 6で透過PNGを利用するために専用に開発されたJavaScriptである、IE PNG FIX jQuery Pluginを利用できる場合がありますが、いずれも万能ではなく、凝ったレイアウトや動作に対応するものではありません。
以上の対策が困難な場合、IE6向けに代替gif画像を利用して補完できる場合もあります。