IE7・8で透過PNGにJSで透過させたら画像が汚くなった場合の対処方法
[mixi] jQuery.js | しつもん No.153 コミュを見ていたところ、自分の書いたプラグインがうまく動作していないとの書き込み。ん？どういうことだ？なんて疑問に思ったのですが、どうやらIE7・8で透過PNGにプラグインを適用させたら画像が汚くなったとのこと・・・ おっと、なぜ！？ どのようなことなのか、確認しつつ対応方法を見つけようと思います。 とりあえず確認 デモとしてあがっていたのをちょっと私の方で処理をしたものと、私の方で用意した画像の計６つをプレビューしてみようと思います。 ※今回はIE6用の処理をいれていないので、PNG32の画像などは背景が透過されずに灰色の色がついて表示されてしまいます。IE7,8での問題なので、今回のエントリーはIE7かIE8で見て下さい。 上記のプレビューをIEで見ると、透過PNG全てが透過処理部分がギザギザになったり透過されていなくなった
JPEG、GIF、PNG画像選択の指針まとめ | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Jennifer Farley氏がSitePointにおいてGIF, PNG, JPG. Which One To Use?のタイトルのもと、Webサイトを作成するにあたってどの画像フォーマットを採用すべきかという指針を簡単にまとめている。まず氏はそれぞれの画像フォーマットの特徴を簡単に説明。 GIF - 256色のインデックス画像。写真には向かないが、ロゴであったりフラットブロックな画像には向いている。透過データを保持できるという特徴がある JPEG - クオリティによって圧縮率が変わる非可逆圧縮の画像フォーマット。透過は表現できないが、写真データの用途に向いている PNG - GIFに似ているが、GIFのようなぎざぎざを出さずに背景透過を実現
半透明PNGとopacityでIEではまった - ?D of K
半透明PNGが背景に設定されている要素をフェードインさせようと思ったが、IEだと半透明部分が黒くなるので、ちょっと試した。 http://kquery.if.land.to/test/png/ 一つ目はdivに背景とopacity（IEにはfilter）を設定した。IE7だと半透明部分が黒くなる。 二つ目はdivの中のspanに背景を設定して、divにopacityを設定した。状況変わらず。 三つ目は二つ目と同じだが、背景の設定方法をAlphaImageLoaderに変えた。なぜか動いた。 四つ目はfilterに複数設定できることを利用して、div一個のfilterにAlphaとAlphaImageLoaderを設定した。なんか怪しい線が出る。 結局、IE7でも32bitPNGをフェードインとかさせようと思ったら、AlphaImageLoaderを使ったりした方がいい。
IE6にPNG画像のアルファチャンネルを効かせる方法のまとめ | Blog hamashun.com
最近はアルファチャンネルを含むPNG画像を利用したサイトが増えてきたように感じます。 2008年9月号のWeb Designing誌でも特集が組まれたりと、関心も高まっているようです。 ただ、そこで問題となるのはIE6のアルファチャンネル問題。 何らかの手段でこれを解決する必要があります。 少し前の仕事でこの問題を解決する必要があり、いくつかのライブラリを試してみたので、それをまとめてみます。 なお、img要素ではなく、CSSの背景画像で使用する場合として検証しました。 img要素にだけ適用したい場合には、もっとシンプルな方法があるかもしれません。 概ね共通する事 標準準拠のCSSのみでは不可能 IEの独自拡張の、filterプロパティを使う必要があります。 CSS内に記述する方法やhtcファイルを使う方法、JavaScriptを使う方法でも、結果的にはこのfilterプロパティのAlph
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
