2011年11月16日水曜日

ie6の透過png表示(AlphaImageLoaderにて)

wordpressで他のie6対応、透過pngのjsが全く効かなかったので
AlphaImageLoaderを使って透過pngを実装した。

やり方は以下の通り。

【例】
div.sample{
background:url(img/bg.png) no-repeat;
}

* html div.sample{
behavior: expression(
this.style.behavior || (
this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop,src='"+this.currentStyle.getAttribute("backgroundImage").slice(5,-2)+"')",
this.style.backgroundImage = "none",
this.style.behavior = "none"
)
);
}

div.sampleで普通に画像を配置して
その後の記述
* html div.sampleでie6のみに
 AlphaImageLoaderを効かせて透過させている。

【参考サイト】
http://www.yomotsu.net/wp/?p=400

0 件のコメント: