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;
}
div.alphaの記述はすべてのブラウザに対して適用されます。
その後に
スターハックを使用してアルファ画像をサポートしていないIEのみに適用するスタイルを記述します。
(IEの独自拡張フィルタを使用しています)
これでほぼすべてのモダンブラウザでアルファ画像を表示する事ができます。
関連エントリー
アルファ画像を扱うalphafilter.jsライブラリ
透過PNGの罠の解決法
スポンサードリンク
«LivedoorのソーシャルブックマークサービスLivedoorClip | メイン | web制作におけるガイドラインのあり方»