THE HAM MEDIA BLOG

[mixi] jQuery.js | しつもん No.153

コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん？どういうことだ？なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・

おっと、なぜ！？

どのようなことなのか、確認しつつ対応方法を見つけようと思います。

とりあえず確認

デモとしてあがっていたのをちょっと私の方で処理をしたものと、私の方で用意した画像の計６つをプレビューしてみようと思います。

※今回はIE6用の処理をいれていないので、PNG32の画像などは背景が透過されずに灰色の色がついて表示されてしまいます。IE7,8での問題なので、今回のエントリーはIE7かIE8で見て下さい。

上記のプレビューをIEで見ると、透過PNG全てが透過処理部分がギザギザになったり透過されていなくなったりと、問題発生しているのがわかると思います。見た感じは下の画像のようになります。

■IEで表示させた場合のもの

JSの処理をいれなければ・・・

JSの透過処理を入れなければ、透過PNGは問題なく表示されます。

試しに今回利用のプラグインを外してみると、うまく透過処理される。

imgの背景にbackground-colorを指定

それでは、何か対応方法はないものか？

画像を作成する際も、背景を透過させるような場合、背景色を指定したりする事なんかもあるので、試しにCSSでimgタグの背景に表示されている背景色と同じ色を指定してみることにします。

※ここではimgの背景色をインラインにてHTMLに直接入れています。

■デモ（HTMLにstyleで背景を指定してみる）

おお、うまく透過処理された！？背景と同じ色をimgの背景にも入れることで問題なく表示されるようになりました。

ちなみに、imgの親要素（今回で言うと、aやp）に背景色を指定したのですが、それではうまく透過処理されませんでした。透過さているところの背景に色指定するのがポイントっぽいですね。

JSでimgの背景にbackground-colorを入れる

imgの背景色を入れるをうまく透過処理をしてくれるようなので、JS側で自動でCSS追加でも問題なく動作するか確認。

■追加したスクリプト

$('img','#demo3').css('background-color','#ffff99');

■デモ

しかし、この背景をつける方法でも問題はありますね。今回のサンプルでは、単色背景だったからこのような方法でもいいのですが、背景に別な見せる画像が入っているような場合は、画像の背景色が見えてしまうため、この方法は利用できませんね。

今回の結論

• １．画像をJSで透過をさせる場合はGIFを利用する。
• ２．透過させたPNGにJSで透過をさせる場合はimgに背景色つける。
• ３．透過させたPNGにJSでの透過はさせない。(透過させた背景を見せるような場合)

と、こんなところでしょうか。

このほかに方法があるのかわからないのですが、とりあえず対応方法の一つとして頭に入れておいていただけたらと思います。今のところ壱番は、GIFを利用するか、もしくはJSで透過させない！ってところでしょうか。