IE6 での PNG アルファ透明度 (完全コレクション)

IE6 は PNG の透明度をサポートしていないと多くの人が言っています。実際、IE は 100% 透明な PNG をサポートしています。おかしなことに、IE6 は PNG のアルファ透明度をサポートしていません。
このバグは私たちに多くの問題を引き起こしました。
しかし、半透明のPNG背景画像など、まだ多くの問題が残っています。
Gulu77 は、IE6 で PNG アルファ透明度を実現するための 4 つの方法をまとめました。
テスト例: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_IE6png8/index.html
ここでは IE6 を使用してテストしており、挿入された画像と背景画像は透明ではありません。

最初の方法: AlphaImageLoader フィルター<br />Microsoft が解決策を提供しています: http://support.microsoft.com/kb/294714/zh-cn

使用方法の紹介: 各ラベルスタイルにフィルターを挿入します:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='scale')
注記：
AlphaImageLoader は透明な画像 <img src=".png"/> を挿入するのが難しい
AlphaImageLoaderメソッドは背景画像に使用され、背景画像効果を実現します。
AlphaImageLoader は IE8 ではサポートされていません。IE7 は AlphaImageLoader をサポートしているため、競合を避けるために、CSS ハックを使用してこれらを区別することをお勧めします。IE6 のテスト例のみを使用してください: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_AlphaImageLoader/index.html

2番目の方法: IEでのPNG透過
概要: 比較的シンプルで、フィルターを含む JavaScript を使用して、画像または背景 PNG のアルファ透明度をシミュレートします。注:
ルートディレクトリにある spacer.gif 透明画像は、png 画像の代わりとして使用されます。JavaScript で記述された spacer.gif のパスは、必要に応じて調整できます。
PNGTransparncyinIE メソッドは、バックグラウンドアプリケーションでの背景画像の効果のみを実現できます。バックグラウンドの繰り返し座標呼び出しは、現時点では実現できません。公式の原文: http://codingforums.com/archive/index.php?t-80555.html
テスト例: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_PNGTransparncyinIE/index.html

3番目の方法: IE PNG Fix v1.0 / 2.0 Alpha 3
今回はその最新バージョンということで、今日はその方法の紹介を中心に紹介していきたいと思います。
使用方法の紹介: ページタグは、behavior:url("iepngfix.htc"); を使用して、PNG アルファ透明度を修正するための js と css を含む外部 iepngfix.htc ファイルを呼び出します。
テスト例 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
テスト例 2 (公式、電子テキスト): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html
* <img src=""> 要素をサポートします。
* 背景の PNG 画像をサポートします (他の多くのスクリプトとは異なります)
* CSS1 背景繰り返しと位置のサポート (オプションのプラグイン経由)
* 背景画像は組み込みまたは外部スタイルシートで定義できます。
* 通常の JavaScript (マウスオーバーロールオーバーなど) を介して src/background への変更を自動的に処理します。特別なコーディングは必要ありません。
* 変更サポートには、変更要素用の CSS「クラス」が含まれます。
* パプアニューギニアのコンテキスト要因の要素を自動的に適応させます。
* 小さなスクリプト（高速ダウンロード）。
* フリーソフトウェアライセンスに基づいてライセンスされています。
使用方法次の簡単な手順に従って、これをページに追加します。
1. iepngfix.htc と blank.gif をコピーして、Web サイトのフォルダーに貼り付けます。
2. CSS または HTML をコピーして Web サイトに貼り付けます。
<スタイルタイプ="text/css">
img、div { 動作: url(iepngfix.htc) }
</スタイル>
この CSS セレクターには、PNG でサポートするタグ/コンテンツが含まれている必要があります。基本的には、使用するタグのコンマ区切りリストを指定します。正しいパスも含める必要があります。 HTC は HTML ファイルの場所を基準とします (CSS ファイルに対する相対位置ではありません)。たとえば、次のようになります。
<スタイルタイプ="text/css">
img、div、a、入力 { 動作: url(/css/resources/iepngfix.htc) }
</スタイル>
3. ウェブサイトがサブフォルダーを使用している場合は、それを開きます。 HTC ファイルを Windows のメモ帳などのテキストエディターで開き、blankImg 変数を変更して、次のように blank.gif への正しいパスを含めます。
IEPNGFix.blankImg = '/images/blank.gif';
ここでもパスは HTML ファイルに対する相対パスです。そうしないと、「壊れた画像」グラフィックが表示されます。
4. CSS1 の background-repeat と background-position をサポートする場合は、必ず追加要素を含めてください。 <head> に js ファイルを追加します:
<script type="text/javascript" src="iepngfix_tilebg.js"></script>
そうでない場合、背景画像は機能しますが、繰り返されたり目立ったりしません。
5. ゆったりと座って、ショーをお楽しみいただけます。気に入ったら、このスクリプトの開発をサポートするために寄付することを検討してください。私はこのスクリプトの開発、テスト、サポートに何百時間も費やしました :)。また、あなたのサイトから私のサイトへのインバウンドリンクもいただければ幸いです。
公式オリジナルテキスト: http://www.twinhelix.com/css/iepngfix/
詳細情報や、CSS 準拠を維持しながらスクリプトをアクティブ化する別の方法に興味がある場合は、デモファイルのソースコードを参照してください。
———————————————————————————–
よくある問題を解決する方法
1. CSS を貼り付けましたが、png が透明になりません。
ファイルへのパスは、CSS ファイル (CSS 背景画像など) ではなく、HTML ファイルに対する相対パスであることを覚えておくことが重要です。パスをテストする場合は、alert('This works!'); を挿入します。 HTC ファイル。
2. オンラインではなくオフラインで動作します。
まず、デモ用にこのプリセットを解凍し、そのまま Web サーバーにアップロードしてみてください。動作しない場合は、MIME タイプに問題がある可能性があります。サーバーが正しい MIME タイプ「text/x-component」を送信することを確認する必要があります。 HTC ファイル。次の 2 つの簡単な修正方法のいずれかを試してください。
3. アップロードしました。 htaccess ファイルにより、圧縮されたスクリプトが Web サーバーにダウンロードされ、Apache が正しい MIME タイプを発行するようになります。
4. CSS から「IEPNGFIX.HTC」を呼び出す代わりに、同じフォルダーに IEPNGFIX.PHP をアップロードして、代わりにこれを呼び出します。これにより、正しい MIME タイプも送信されます。
5. 私の png は透明ですが、奇妙な境界線や赤い「X」アイコンが表示されます。
blankImg 変数が正しく設定されていることを確認します。 HTC ファイルも HTML ファイルに対応しており、PNG が含まれています。
画像が歪んだり、このスクリプトによってページのレイアウトが崩れたりします。
寸法を設定せずに画像に適用すると、スクリプトは正しい画像寸法を「推測」して適用しようとします。間違って実行される場合は、画像の幅を明示的に指定します。
リンクまたはフォーム要素である png 要素はクリックできません。
テスト例 1: http://www.css88.com/demo/IE6_bug/IE6_bug_2/IE6_bug_2.html
テスト例 2 (公式、電子テキスト): http://www.css88.com/demo/IE6_bug/IE6_bug_2/iepngfix.html

4番目の方法: IE PNG Fix v1.0 / 2.0 Alpha 3
使用方法の紹介: ie7/ie8-js は、IE と W3C 標準間の競合を解決し、Microsoft の IE を Web 標準に準拠したブラウザーのように動作させ、より多くの W3C 標準をサポートする JS ライブラリです。
公式オリジナルテキスト: http://code.google.com/p/ie7-js/
テスト例: http://www.css88.com/demo/IE6_bug/IE6_bug_2/test_ie7-js/index.html