IE6 に PNG 透過画像をサポートさせよう_html/css_WEB-ITnose

よくある問題は、IE6 が透過 PNG 画像をサポートしていないことです。しかし実際には、IE6 は png-24 形式の透明な背景画像をサポートしていないだけですが、透明な背景を持つ png-8 画像は引き続きサポートしています。ただし、png-8 画像は 256 色しかなく、配置すると白くギザギザして表示されます。どのブラウザでも。

コードが次のような場合:

<style type="text/css"> .gif{ width: 400px; height:200px; background:#f00 url(png8.png) no-repeat;     } </style><div class="gif"></div>

div の背景画像は、以下の透明な背景の png-8 画像です:

ブラウザを開いたときの効果は次のとおりです (chrome、firefox、 ie6+ はすべてこのようなものです 効果):

この白くなったギザギザの歯を見ると泣きそうになります。ps で png-8 画像を保存するときに、どうすればよいですか?複数のオプションをテストした後、「拡散透明ディザリング」を使用すると、ギザギザを最小限に抑えることができます。下の写真に示すように、現時点ではギザギザはそれほど不快ではありません。しかし、それだけでは十分とは言えず、視覚効果はまだ悪すぎます。ネットで検索したところ、これは png-8 の白いマットエッジによって引き起こされる問題であることがわかり、画像を保存する前にマットエッジの色を背景と一致するように設定することで解決できました。

ie6 での効果は次のとおりで、他のブラウザでの表示効果も同じです:

現時点では、ie6 では png-8 の透明な背景画像は正常に表示されますが、表示されませんie6 のみですが、他のブラウザでも使用できます。非常に使いやすそうですが、png-8 は 256 色しかなく、色が豊富ではありません。一方、現在広く使用されている png-24 は 2^24= です。 1,678 万色。非常に豊かな色を表示でき、エイリアシングがありません。したがって、元の画像が非常にカラフルな場合、ダウングレード方法としては、png-8 画像に変換して IE6 で使用することしかできません。もう1つの問題は、マット処理の前提として、画像範囲の背景色が単色である場合、エッジが常にギザギザになってしまうことです。

IE には専用の AlphaImageLoader フィルターがあり、これにより IE6 は透明色をグレーとして表示する代わりに、png-24 の透明な背景をサポートできるようになります。ここでは、IE のハック トリックを使用する必要があります。背景を変更するには -Image を none に設定して背景画像を削除し、フィルターを使用して画像を読み込みます。 AlphaImageLoader フィルターのパラメーター src は、表示される png-24 イメージを指します。 sizingMethod には 3 つのオプションの値があります。 Crop: コンテナーに直接配置し、イメージの左上隅をコンテナーの左上隅に揃えます。 、画像: コンテナの端を調整して包み込みます。画像全体、スケール: 画像をコンテナ全体を満たすように調整します。

すごいです

効果は適切です:

ただし、フィルター効果を実行するには [許可] をクリックする必要があるというメッセージがブラウザーから表示されることに注意してください。そうしないと、フィルター効果が実行されないだけです。フィルター効果はありますが、解除により画像が全く見えなくなります（赤だけ、文字が見えなくなり、画像省略）:

それぞれにフィルター効果を加えるのが面倒な場合この関数は、ページ上のすべての PNG 画像を一度にキャプチャし、IE フィルター効果を追加します。ただし、ユーザーが js スクリプトを無効にしたい場合は、それでも問題ありません。

別の方法は、IE 独自の CSS 拡張機能 - 動作を使用し、.htc ファイルを参照して PNG の透明な背景の問題を解決することです (.htc ファイルは角丸ボックスの解決にも使用されます)。

このテクノロジーを紹介する Web サイトは次のとおりです: http://www.twinhelix.com/css/iepngfix/。デモ ファイルを直接ダウンロードすることもできます。詳細な使用プロセスは、デモ ページ (www.twinhelix) で説明されています。 com/css/iepngfix/iepngfix.zip。

htc ファイルを引用しなくても、灰青色の背景が表示されます。

htc ファイルを引用した後は、透明な背景が通常表示されます (ブロックされたコンテンツを実行するには [許可] をクリックする必要があります)通常表示）:

ie6 で背景透過の png をサポートさせる方法をまとめます。互換性があるため、100% 完璧であることはできませんが、決定を下す前に、Web ページの開発を完了するために使用する特定のテクノロジを検討する必要があります。開発者は常に古いブラウザとの互換性が不快であると不満を述べていますが、古いブラウザも大きな貢献をしています。

IE6 はすでに 20 年代を迎えていますが、XP ユーザーはまだ多く、ほとんどの家庭ではコンピューターを変更せずにブラウザをアップグレードすることはありません。そのため、IE6 が歴史の舞台から撤退するには、しばらく時間がかかるでしょう。 ie6 の短い寿命の中で、私たちがしなければならないことは、さまざまなバグを修正し、ie6 が消滅するのを静かに待つことだけです。

追加:

IE8 も互換性がなくなったと誰かが言っていましたが、これ以上は言いません。下の写真は Baidu のブラウザ市場シェア統計から引用したものです。過去 3 か月で、IE8 ユーザーが 21.62%、IE7 ユーザーが 5.12%、IE6 ユーザーが 3.85% を占めました。開発者として、あなたの Web サイトが以前のバージョンの IE と互換性がないからではないでしょうか。 30% のユーザーには公開されていませんか? IE6 と互換性がないため、100 人中 4 人があなたの Web サイトに否定的なレビューを付けます。もちろん、この統計は一般的な状況に基づいています。Web サイトにアクセスする特定のユーザー グループが Chrome または Firxfox ブラウザを使用していることがわかっている場合は、当然、IE の以前のバージョンと互換性がある必要はありません。 js フレームワークは基本的に下位バージョンを放棄します。これは事実です。なぜなら、js フレームワークのほとんどは外国人によって書かれているからです。外国人は基本的に Chrome ブラウザを使用していますが、中国では多くの人が依然として IE ブラウザの低レベルを使用しており、アップグレードすることすら考えていません。複数のブラウザとの互換性がない人は良い開発者ではないと常々感じています。すべてのブラウザとの互換性はすべての開発者の責任であり、ユーザーに自分と同じブラウザの使用を要求することは決してできないからです。

--------------------------------------転載する場合は出典を明記してください^_ ^: