IE6で透過PNGを利用してz-indexで画像を重ねる

ie6png

やろうと思ったことがz-indexを利用しないとうまく出来ないなーと思いつつ、PNG画像を作ってサンプル書いてみたけど、まぁ~当然のように逝ってほしいIE6が立ちはだかる。はぁ~めんどい。

Googleが配布しているie7.jsなんかを使えば透過PNG以外にもイマドキな感じに改造してくれるけど、あまりいい印象が無いので(やたらと重かった?)、他を探してみたら簡単で使いやすそうなDD_belatedPNG.jsを見つけました。

まず配布サイトからjs(今日現在0.0.7a)を拾ってきてhead部分でIE6用に読み込みます。

<!--&#91;if lte IE 6&#93;>
<script type="text/javascript" src="js/DD_belatedPNG.js"></script>
<script type="text/javascript">
  DD_belatedPNG.fix('.png_img');
</script>
<!&#91;endif&#93;-->

4行目のfix()内で要素名やid、classを指定します(ココではクラス名をpng_imgとしています)あとは該当のimgにこのクラスを指定するだけ。楽チン!

サンプルはこちら http://vayu.asia/sample/ie6png/

元画像にはクラス指定をしてないのでIE6では周囲がグレーになっていると思います。
ソースは以下のようになってます。

html

<div id="original">元画像(クラス指定なし)<br />
<a href=""><img src="img/sample.png" alt="" /></a></div>
<br />
<div id="block1">ブロック1</div>
<div id="block2">ブロック2</div>
<div id="block3">ブロック3
<a href=""><img class="png_img" src="img/sample.png" alt="" /></a>
</div>

css

#original{
	background:#FFDFFB;
	width:500px;
	height:300px;
}
#original img{
	border:none;
}
#block1{
	background:#0C0;
	width:500px;
	height:300px;
}
#block2{
	background:#FFF;
	width:500px;
	height:30px;
}
#block3{
	background:#999;
	width:500px;
	height:300px;
	position:relative;
	z-index:1;
}
#block3 img{
	position:absolute;
	z-index:10;
	top:-120px;
	left:120px;
	border:none;
}

このブログではPNG対策はしていないので、一番上の画像はグレーっぽいはずです。