IE6 で透過 PNG が使えるようになる javascript は結構色々ありますが、background-repeat や background-position に対応したものはあまり見かけないので、いざというときに活躍してくれるはずです。
ファイルサイズも圧縮版で約 5Kb と軽いです。

使い方は、

1. DD_belatedPNG.js を読み込む
2. head 内で DD_belatedPNG.fix() を呼び出し、適用させたい CSS セレクタを指定する

となっています。
具体的には、

<!--[if lte IE 6]>
<script type="text/javascript" src="DD_belatedPNG_0.0.6a.js"></script>
<script type="text/javascript">DD_belatedPNG.fix('.png_bg');</script>
<![endif]-->

IE6 以上のブラウザなどには意味がない指定なのでコンディショナルタグで他のブラウザには読ませないようにしています。
スクリプトのバージョンが 0.0.6a となっているので、今後もっと軽くなったりするのが楽しみです。

関連投稿

• 要素の高さをそろえるjQueryプラグイン
  category: jQuery > javascript tags: inline-block+javascript+jQuery.
• タイル状にアニメーションして画像を切り替えるjQueryプラグイン jFancyTile
  category: jQuery > javascript tags: javascript+jQuery.
• 透過PNGを使う時に注意すること２
  category: css tags: AlphaImageLoader+IE6+javascript+透過PNG.

どうしても透過PNGを使いたい場合、IE6でもちゃんと表示させるには、

1. AlphaImageLoaderを使う
2. javascriptを使う

ことになると思います。

AlphaImageLoaderを使う場合

AmentiさんのIEと透過PNGという記事にまとめられていて、読むのは大変ですがとても勉強になります。

この中に「標準準拠モードだと効かない」というように書いてあります。
IE6でも標準準拠モードになるように作っている人は要注意の箇所ですね。

AlphaImageLoaderは外部のスクリプトを使わず一番手軽に利用できるIE6の透過PNG対策だと思います。

javascriptを使う場合

かなりアバウトな表現になっているのは、同じことをするにも様々なスクリプトがあるから。

その中でも、透過PNGをCSSで背景に指定してIE6や5.5のバージョンでも綺麗に表示してみる – DesignWalkerで紹介されている、「iepngfix.js」は結構使いやすいスクリプトなんじゃないかと思います。

これを使うときは、iepngfix.jsを読み込み、cssで該当箇所（仮にクラスhoge）に以下のように指定する。

* html .hoge{
behavior:expression(IEPNGFIX.fix(this));
}

指定するのはこれだけ。
あとは、このjavascriptを適用するのはIE6以下なので、html内でそれらのブラウザにだけ読ませる。
これをやらなくても「* html」がついてるので、どっちにしろIE7以上では効かないです。

<!--[if lt IE7]>
<script type="text/javascript" src="iepngfix.js"></script>
<![endif]-->

IE以外のブラウザにはこの対処法は効かないので、[if lt IE7]の部分を[if IE]に変えて、「IEなら」という条件にしてもいいかも知れません。

他に「IE7.js」というライブラリがあります。

これを読み込んでおき、透過PNGに名前をつける時に「XX-trans.png」（XXは任意）という形式にします。
そうすると、backgroundプロパティでこのPNG画像を指定した際に透過されて表示されるというもの。

このライブラリは透過PNGのためだけのライブラリではなく、これを読み込むと、IE6以下でもIE7と同じようなレンダリングをしてくれるという機能まであります。例えばIE6以下で、

1. a以外の要素に:hoverなどの疑似クラスが使えるようになる
2. position:fixedが使えるようになる

というものです。

ただ注意しなければならないのは、既存のサイトにIE7.jsを読み込むと、IE6用に指定していたcssハックが影響して表示にズレが生じてしまいます。気をつけましょう。

それと、IE7.jsについてもう１つ。
サーバー環境にもよるかもしれないんですが、結構重かった記憶が・・・。

一回あるサイトのリニューアルの際に使おうとしたけど、あまりに遅くて導入を諦めたことがあったので、使ってみたい方は一度チェックしてみたほうがいいと思います。
軽かったらぜひ使いたいライブラリです。今後のバージョンアップに期待してます。

※2008年7月9日23時5分 追記

記事を更新した直後に発見してしまったので、追記します。

[JS]超軽量で設置も簡単な、透過PNGをIE6で表示するスクリプト -Unit PNG Fix

実際に使ったことが無いし、容量が軽いから動作が軽いとも限らないのでなんとも言えませんが、javascriptファイルだけなら1KBありません。ここまでファイルが小さいのは今までになかったんじゃないでしょうか？

ダウンロードしたら、Zipファイルを解凍し、unitpngfix.jsの1行目にある、clear.gifのパスを自分のサーバーのものにする。
画像のパスを変更したら、htmlからunitpngfix.jsを読み込む。
これだけでいいようです。

注意：imgタグにwidthとheightの値を入れておかないと画像が見えなくなってしまうようなので、それだけは気をつけてくれということです。

使ってみた方がいたら感想を教えてもらいたいですね。

関連投稿

• IE6 で透過 PNG を使えるようにする javascript
  category: javascript tags: IE6+javascript+透過PNG.
• 要素の高さをそろえるjQueryプラグイン
  category: jQuery > javascript tags: inline-block+javascript+jQuery.
• タイル状にアニメーションして画像を切り替えるjQueryプラグイン jFancyTile
  category: jQuery > javascript tags: javascript+jQuery.

透過GIFをグラデーションのかかった部分に乗せるとどうしても汚い部分ができてしまいます。しかし透過PNGだとそういうことが無いので、今後透過GIFよりも使われることが多くなっていくと思います。

僕個人としてはどんどん使っていきたいものなのですが、透過PNGを使う際には気をつけなきゃいけないこともあると思います。
具体的には、

1. 本当に透過PNGを使わなきゃいけないのか？
2. ターゲットブラウザをどこまでの範囲にするのか？
3. IE6など、対応していないブラウザに対してどういう処理をするのか？

ということ。
他にもいろんな考えがあるかもしれませんが、このような問題をクリアしないとなかなか使いにくい状態に陥ると思います。

まず１の問題。

「透過PNGを使う時に～」というタイトルを根本から否定することにもなりますが、実は一番大事なことだと思っています。

使わないでも同じデザイン・機能を表現できるなら透過PNGを使わないほうが確実に安全なサイト作りができると思いますｗ
しかも使わなくても何とかなる場合が結構あると思います。

以前作成したサイトに透過PNGを使ったのですが、対応ブラウザの件（後述）で余計な手間がかかってしまうことも含め、透過PNGを使う必要はなかったと思ってます…。

次に２の問題。

すべてのユーザーがブラウザを最新にしているならまだしも、未だにIE6もしくはそれ以下のブラウザを使っている人も結構います。

そういった人達もターゲットにしたいサイトならば、透過PNGを使わない、もしくはjavascriptを使って透過しているように見せるなどの対処が必要になります。
この場合なら使わないのが最善策な気がします。

最後に３の問題。

２の問題があったとしても透過PNGを使うことを諦められない！という場合には、IE6など古いブラウザでもちゃんと見れるようにしないといけません。
具体的な対応策としては、

1. AlphaImageLoaderを使う
2. javascriptを使う

というもの。
ここらへんが一般的なんじゃないかと思います。

長くなったので、次回に続きます。

関連投稿

• 透過PNGを使う時に注意すること２
  category: css tags: AlphaImageLoader+IE6+javascript+透過PNG.