THE HAM MEDIA BLOG

jQueryを使って透過pngをIE6で適応させる方法

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
jQuery plugin紹介
タグ:
jquery
javascript
png

PNG Fix

最近PNGでの表現が流行り?

ちょっとその辺は情報不足なので省略しますが、
今日はjQueryのプラグインを使って透過PNGをIE6に対応させてみます。

透過PNGを使えるほうにする方法は、
すでにいろいろな方法が紹介されていて、最近でも、
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ
なんてのが紹介されたりしています。

今回紹介するjQueryのは、もうかなり前からあるのですが、
個人的に知らなかったので、メモとしてエントリーしておきます。

PNG Fix

■ サンプル透過PNG画像(未処理)

PNG Fix

上の画像はFxなどで見ると透過部分は白くなっているのですが、
IE6以下で見ると、灰色になってしまっています。

PNG Fix

バックをピンクにしたので、透過しているかわかるとおもうのですが、
透過されている部分は、IE6だと灰色になっていて、
うまく透過処理されていません。

これにjQueryの『PNG FixM』というプラグインを使うと、
綺麗に透過されるようになります。

■ 透過後

PNG Fix

中央部分もピンクになっていると思います。

今後はPNGを使ったサイトはどんどん増えていくのでしょう。
jQueryを使っているのであれば、この方法を使うのが楽だと思います。

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

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

ホームページアドレス:

コメント: [必須入力]

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


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

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

トップに戻る