IEとそれ以外のブラウザでアルファ画像を使う方法

pngのアルファ画像をIE6とその他のモダンブラウザでアルファの画像を表示する方法

記述するcssコード

div.alpha{
	width:100px;
	height:200px;
	background:url("alpha.png");
}
* html div.alpha{
	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='alpha.png',sizingMethod='scale');
	background:none;
}

html sample

div.alphaの記述はすべてのブラウザに対して適用されます。
その後に
スターハックを使用してアルファ画像をサポートしていないIEのみに適用するスタイルを記述します。
(IEの独自拡張フィルタを使用しています)

これでほぼすべてのモダンブラウザでアルファ画像を表示する事ができます。

関連エントリー

アルファ画像を扱うalphafilter.jsライブラリ
透過PNGの罠の解決法

スポンサードリンク

«LivedoorのソーシャルブックマークサービスLivedoorClip | メイン | web制作におけるガイドラインのあり方»