pngの背景透過画像をIE6で使う

画像にはビットマップ、gif、jpg、pngなどいくつかの種類があります。
普通背景透過の画像を作成する場合はgifで画像を作るのが一般的ですが、pngで背景透過画像を作成すると、アルファチャンネルを使って背景透過画像を作る事ができるので、グラデーションがかかってる画像にも背景透過の効果を与える事ができます。

CSSレイアウトが主流になってから画像の重なりが多くなってきたので、大変便利ですね。
しかし、こんなpng背景透過画像にも欠点が・・・
IE6では透明の部分がグレーで表示されてしまうのです!

それを解決してくれるのjsがいくつかあるのですが、そんな中から評判のよいDD_belatedPNGをご紹介します。

1、まずは、下記からファイルをダウンロードします。
http://www.dillerdesign.com/experiment/DD_belatedPNG/

2、ダウンロードしたJavaScriptファイルを任意の場所に設置します。

3、以下を内に記載します。

<script src="DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script type="text/javascript">  
 
// 任意のIDまたはclass名を設定  
DD_belatedPNG.fix('.pngPerm');  

</script>

これで準備は完了!

適用したい要素に上記で指定したidまたはclassを指定して完成です!

<img src="sample.jpg" width="100" height="20" class="pngPerm" />

最近はIE6もサポートを終了し、作成の段階で捨てて考えたりすることもありますが、
シェアを考えると難しいところですよね。