» 透過pngを表示するCSS TIPS with WebCreativePark

透過pngは便利な機能なのですが、IE6が対応していない為、通常のやり方では使用できません。

IE6とその他のモダンブラウザで透過pngを表示する方法は以下のようになります

記述する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の記述はすべてのブラウザに対して適応されます。

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

これでほぼすべてのモダンブラウザで透過pngを表示する事ができます。