» アルファ画像を表示するCSS TIPS with WebCreativePark

pngのアルファ画像は便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。

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;
}

サンプル

div.alphaの記述はすべてのブラウザに対して適応されます。

その後にスターハックを使用してアルファ画像をサポートしていないＩＥ６のみに適応するスタイルを記述します。（ＩＥの独自拡張フィルタを使用しています）

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