背景画像もOK！DD_belatedPNG.jsでIE6に透過pngを実装させる方法（1）

▼参考URL
http://smkn.xsrv.jp/blog/2009/04/postscript_dd_belatedpng_js/

☆透過PNGをIE6に対応させる手順☆
▼ここからjsファイルダウンロード。
（真ん中ぐらいに「Download」ボタン2つありますが、0.0.8a-min.jsです。）
http://dillerdesign.com/experiment/DD_belatedPNG/
1.jsフォルダに『DD_belatedPNG_0.0.8a-min.js』を入れる。
2.headに下記記入

<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js" type="text/javascript"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
//imgすべてとclassをpng_bgで指定している背景画像に適用される
</script>
<![endif]-->

3.背景に透過pngを使う場合はclass名をつける(class="png_bg")
↓html

<div id="foo" class="png_bg">
  <p>背景が透過pngのdivです。</p>
</div>

↓css

//画像パスとリピート設定
#foo {background:url(○○.png) repeat left top;}

4.画像置換（ロールオーバー）を設定する場合はa要素のbackgroundの置換設定にする。(CSSのみで設定する。jQuery等使えない）
↓html

<a href="http://○○○.html" id="rollover01" class="png_bg"></a>

↓css

#rollover01 {width:○○○px;height:○○○px;}
a#rollover01:link {background:url(mouse_on.png);}
a#rollover01:hover {background:url(mouse_off.png);}

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>透過PNGの練習</title>
<style>
body{
  background-image: url(images/02.gif);
  background-repeat: repeat;
}
</style>
<!--[if IE 6]>
<script src="js/DD_belatedPNG_0.0.8a-min.js"></script>
<script>
DD_belatedPNG.fix('img, .png_bg');
</script>
<![endif]-->
</head>
<body>
<p><img src="images/01.png" width="584" height="657" alt=""></p>
</body>
</html>