• HOME
  • HTML/CSS
  • IE6以下で透過PNGを使用する(JavaScript使用)

IE6以下で透過PNGを使用する(JavaScript使用)

管理人:sofu

透過画像サンプル

最近Webサイトでよく見かける透過PNG。まず上の画像を見てください。(できればIE6以下で見て欲しいです)
背景が白だったら透過処理しています。背景がグレーだったら透過されていません。モダンブラウザ(FireFox,Opera,Safariなど)では問題なく表示されるんですが、IE6以下ではPNGの透過処理がされないんです。そこで、透過PNGをIE6以下でも使えるようにするちょっとしたテクニックを紹介します。

iepngfix.jsを使う

  • 1. まずユンサンの「透過PNGとIEとIE7まとめ」からiepngfix.jsをダウンロードします。
  • 2. iepngfix.jsファイルをアップロードして<head>から</head>の間に以下のコードを書きます。
 
<!--[if IE]>
    <script src="iepngfix.js" charset="utf-8" type="text/javascript"></script>
    <style type="text/css">
        .iepngfix {
            behavior: expression(IEPNGFIX.fix(this));
        }
    </style>
<![endif]-->
 
  • 3. 透過したいPNG画像にクラス名、またはID名を追加すれば完了です。
<img src="alpha.png" width="140" height="90" alt="" class="iepngfix" />
  • ※必ず条件分岐(<!--[if IE]><![endif]-->)の間にJavaScriptとCSSをセットで書き込んでおきます。条件分岐の間にJavaScriptだけ書いて、外にCSSを指定した場合、IE以外のブラウザだと「iepngfix.jsが見つかりません」みたいなエラーがでます。

→iepngfix.jsを使ったサンプル

blog comments powered by Disqus

PageTop