THE HAM MEDIA BLOG

IE7・8で透過PNGにJSで透過させたら画像が汚くなった場合の対処方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
JavaScript
タグ:
透過
opacity
IE

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

おっと、なぜ!?

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

とりあえず確認

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

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

透過PNG8

透過GIF

透過PNG32

透過PNG8(色つき部分透過有)


マットを背景黄色に合わせてます。

透過GIF(色つき部分透過有)

透過PNG32(色つき部分透過有)

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

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

201002163.jpg

201002164.jpg

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

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

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

imgの背景にbackground-colorを指定

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

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

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

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

imgに背景色:透過PNG8

imgに背景色:透過PNG32

imgに背景色:透過PNG8(色つき部分透過有)


マットを背景黄色に合わせてます。

imgに背景色:透過PNG32(色つき部分透過有)

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

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

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

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

■追加したスクリプト

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

■デモ

imgにJSで背景色:透過PNG32

imgにJSで背景色:透過PNG32(色つき部分透過有)

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

今回の結論

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

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

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

この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は1年以上新しい記事の投稿がないブログに表示されております。