WordPressアップデートによるテーマファイル構成の不具合により、現在は仮のテーマで表示しています。
記事など読みづらいところが多々あると思いますがご了承いただけると幸いです。
鋭意修正中です…

IE6でPNG画像を透過させる方法

ここ最近、ブラウザの進化と共にアルファチャンネルを含むPNG画像を
使用しているサイトが多くなってきています。

PNG画像はFirefoxやSafari、IE7などは対応となっていますが
やはり問題なのは「IE6」。
このブラウザはPNG画像の透過が対応していません。

使用する際はライブラリを使用する必要がありますが、
今日はそれらのメモ書きです。

以下が代表的なIE6でのPNG透過用ライブラリ。

・iepngfix.js
「iepngfix.js」ファイルをページ上に設置し、
CSS上で効果を効かせる要素に対して、
「behavior: expression(IEPNGFIX.fix(this));」
といった指定を加えます。

・alphafilter.js
「alphafilter.js」ファイルと「prototype.js」をページ上に設置し、
効果を効かせる要素に対して、
「class=”alphafilter”」
の指定を加える。

・jquery.pngfix.js
「jquery.pngfix.js」ファイルと「jquery.js」ファイルを設置し、
<script type=”text/javascript”>
$(document).ready(function(){
$(‘div#sample’).pngFix( );
});
</script>
といった具合にID要素を指定。

PNG画像をimgとして貼り付ける場合や背景画像として使用する場合など
分けられますが、それぞれ使い分けるといいと思います。

これらを使用することでIE6でPNG画像を透過することは可能ですが、
問題点もあったりします。

1.背景画像として連続表示することは不可。
2.PNG透過指定をするエリア上にリンク(テキスト&画像)を設置してもクリックができなくなる。

これが結構致命的だったり…

問題点を回避する為に、記述が余計に増えたりするのは考え物です。。。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です