以前仕事でpng24を使ったことがあったので、その際記事にしていたと思い込んでいました。丁度機会があったので記事にしておきます。pngが使えるようになると綺麗だし、軽いからいいこと尽くしな感じがするんだけど、IE6がサポートしてないのが痛いですね。IE7では使えるようになったとか噂を耳にしますが、当分IE6がターゲットブラウザから外されることもないと思いますので、まだ楽はできないようです。
上の画像はpng24です。IE6で見ると周りに薄い水色が出てくると思います。FirefoxやSafariの方は見比べてみてください。
これはIE6及びそれ以前のバージョンは複数のアルファチャンネルに対応していないからです。FirefoxやSafariなどでは普通に表示されます。
ですので、IE6用にカスタマイズしないといけません。
01.普通画像はimgタグで記述するだけです。
HTML
<img class="sample" src="images/png24.png" width="180" height="100" />
02.imgタグをdivタグで囲みます。その際にはdivにclassかidを付けてください。
HTML
<div class="sample"> <img src="images/png24.png" width="180" height="100" /> </div>
03.スタイルシートを記述する(スターハック使ってます。)
もしIE用に別のスタイルシートがあったらそちらに記述してもOK
CSS
</pre> * html div.sample{ width:180px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=images/png24.png); } * html div.sample img{ display:none; }
※少し解説
スターハックでIEのみに読み込ませている。divのボックスに画像と同じ幅と高さを指定する。filter:からはじまる1行の画像のパスは表示させるhtmlからの相対パスになります(絶対パスでも可)。
次の指定ではdisplay:none;がありますので、本来imgタグで表示される画像を表示させなくしてます。
調べてみると、ie独自拡張のbehaviorを使う方法など色々とでてきます。私も以前仕事で使ったものは違うものでしたし、ご自分にあったものでお試しください。
今回の記事はdnclを参考にさせて頂きました。
念のためにサンプルデータもあげときました。
※サンプルデータをご利用の際に発生した障害やデータ破損などについては、当サイトは一切の責任を負いません。
結構ややこしいですね。。
ブログの背景画像に使おうとしましたが、divが画像に合わせて縮小してしまいました(T_T)
諦めてPNG-8に戻りました。。