透過PNGをIE6でも透過させて表示する
透過PNGをIE6で表示すると、透明な部分が、灰色になってしまいます。
有名な問題ですよね、これ。
透過させるようなきれいなサイトができなくなってしまいます。
次のようなJavascriptを利用して、そんな問題を解決できます。
DD_belatedPNG
http://dillerdesign.com/experiment/DD_belatedPNG/#release0.0.8a
以下、やり方です。
- 上記のサイトからソースをダウンロードします。
- HTMLにてそのJavascriptをの中などで読み込み、DD_belatedの関数を呼び出します。
- HTMLのコード中、透過PNGがある部分に、クラス名”png_bg”を指定します。
<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* EXAMPLE */
DD_belatedPNG.fix('.png_bg');
/* string argument can be any CSS selector */
/* .png_bg example is unnecessary */
/* change it to what suits you! */
</script>
<![endif]-->
サンプルは、IE6のみでこのコードが動作するようになってますね。
//画像ファイルに利用したいとき <img "touka.png" class="png_bg"> //背景が透過PNGの<div>などに利用する <div class="png_bg">
簡単！早い！感動です。