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

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

<<:  Vue での this.$set の使用に関する詳細な説明

>>:  HTMLはテキスト行のインターセプトの実装原理とコードを超えています

推薦する

Dockerコンテナ終了エラーコードの手順

実行後、一部の Docker コンテナが終了することがあります。原因を調べるには、Docker コン...

CSS scroll-snap スクロールイベント停止と要素位置検出の実装

1. スクロールスナップはフロントエンド開発者にとって必須のスキルですCSS スクロール スナップは...

Vueソースコード解析における仮想DOMの詳しい説明

なぜ仮想DOMが必要なのでしょうか?仮想 DOM はブラウザのパフォーマンス問題を解決するために設計...

GZIP 圧縮 Tomcat と Web パフォーマンスの改善プロセス図

1. はじめに最近、あるプロジェクトに取り組んでいたのですが、サーバーからクライアントに返される J...

デジタル時計効果を実現するJavaScript

この記事では、デジタル時計効果を実現するためのJavaScriptの具体的なコードを参考までに紹介し...

MySQL での order by の使用に関する詳細

目次1. はじめに2. 本文2.1 単一列のソート2.2 複数の列を並べ替える2.3 ソート方法2....

Nodejs で WeChat アカウント分割を実装するためのサンプルコード

会社のビジネスシナリオでは、WeChat アカウント分割機能を使用する必要があります。公式 Web ...

Vue スキャフォールディング学習プロジェクト作成方法

1. 足場とは何ですか? 1. Vue CLI Vue CLI は、Vue.js をベースにした迅速...

HTML内のフレームセットタグが正常に表示されない原因の解析と解決方法

<frameset></frameset>は皆さんもよくご存知のものです。こ...

HTML ハイパーリンク タグ_Powernode Java アカデミー

HTML を学習したり使用したりしたことがある人なら、<a> タグについてよく知っている...

docker.service 起動エラーの詳細なトラブルシューティング

エラーを報告するには次のコマンドを実行しますsystemctl dockerを再起動しますエラーメッ...

Dockerカスタムネットワークコンテナ相互接続

目次序文-リンクカスタムネットワーク質問する序文前回は、 -Linkパラメータを使用してコンテナ間の...

フォーム内のどの隠し属性をフォームとともに送信できるか

フォーム内の visibility=hidden および display=none のフォーム要素は...

シンプルな HTML ビデオ プレーヤーを実装する方法

この記事では、シンプルな HTML ビデオ プレーヤーを実装する方法を紹介し、皆さんと共有します。詳...

MySQL データ挿入最適化メソッドconcurrent_insert

スレッドがテーブルに対して DELAYED ステートメントを実行するときに、そのようなハンドラーが存...