IE6 PNG 透明性のための究極のソリューション (最強の W3Cfuns-IE6PNG ポストの作成)_html/css_WEB-ITnose

解決策 1 - フィルター ソリューション:

はじめに: フィルターは IE4.0 から Microsoft によって正式に導入されたため、フィルターを使用して IE6 の PNG 透明度の問題を解決できます。フィルターは現在の CSS3 の一部の回転を実現するだけではありません。エフェクトや画像も紹介可能です。注: この方法は、IETest の一部のバージョンでは無効です。テストには標準の IE6 を使用することをお勧めします。


ディレクトリの説明:

アイデア:
1. すべてのブラウザがこの PNG 画像を使用できるように、背景を介して画像をインポートします。 /images/W3CfunsLogo.png);


2. フィルター ペアを介して画像を導入するとき、それは CSS ファイルではなく HTML ファイルを基準とします。
DXImageTransform.Microsoft.AlphaImageLoader (src="images/W3CfunsLogo.png");

コードはここに書かれています。IE6 でテストしたところ、画像を導入するようにフィルターを設定しましたが、背景も透明になっていないことがわかりました。この画像も読み込まれますが、以下に示すように、背景レイヤーがフィルター設定よりも上位にあるため、表示されません。フィルターを使用すると、背景を無効にする必要があるため、CSSHack を使用してこの問題を解決できます (IE6 の CSSHack の使用方法がわからない場合は、ここをお読みください)。IE6 の背景:none を変更するだけです。取得できるコードは次のとおりです:
_background: None;/*このコードは IE6 のみを認識します*/

、フィルターでは IE6 でしか作成できませんが、IE6+ バージョンのブラウザーでも認識されます。フィルター、PNG 透明度に関する灰色の背景の問題がないため、フィルターに IE6 Hack を追加することもできます。 4. 最終的に、次のコードを取得できます:

#PICS

{ Background: url (../ Images/W3CFUNSLOGO.png) no-Repeat; その後、CSS で定義する必要があります。 : カーソル: ポインタ; 手として表示されます。それ以外の場合は、デフォルトのマウス状態になります。

利点: 1. プラグインなしで緑色になります。
2. 高効率で高速です。
3. ネットワーク速度が遅い場合は、灰色に表示されず、リモート画像をサポートします。疑似クラスの Hover Wait をサポートしますが、2 つの画像を使用する必要があります。ネットワーク速度が遅い場合、2 番目の画像は完全にロードされていないため、一時的に表示されません。


欠点: 1. タイリングサポートされていません。フィルターには sizingMethod="scale"、ストレッチおよびスケーリング モードがありますが、純粋なカラーまたは単純なグラデーション カラーの場合は、画像が変形されます。
2. サポートされていません。 Img タグ; 3. CSS スプライトをサポートしていません。
使用状況: 1. png を導入する画像がない場合に検討できます。 2. CSS スプライトが必要ない場合に検討できます。 3. タイリングの必要がない場合に検討できます



フィルターソリューション - デモ入口

オプション 2 - HTC プラグイン ソリューション:

はじめに: IE バージョン 5.5 以降、Internet Explorer (IE) は Web 動作の概念をサポートし始めます。これらの動作は、接尾辞 .htc が付いたスクリプト ファイルによって記述されます。このスクリプト ファイルは、プログラマーが HTML ページ上のほぼすべての要素に適用できるメソッドと属性のセットを定義します。


ディレクトリの説明:

アイデア:
1. まず、圧縮ファイル htc.zip (2.27 KB、ダウンロード数: 2 851) をダウンロードします。 )
2. コピーiepngfix .htc とblank.gif を Web サイトのフォルダーに貼り付けます。
3. 使用する PNG タグを、HTML ファイルの位置を基準にして次のように定義します (CSS ファイルを基準とするものではありません!)。たとえば、次のようになります。

5. Web サイトが使用しているサブフォルダーを開きます。 HTC ファイルで、16 行目あたりのblankImg変数を変更し、blank.gifパスを次のように変更します。同じパスは、HTMLファイルの場所を基準にしています(CSSファイルを基準としていません!)。 I IEPNGFIX.BLANKIMG = "Images/Blank.gif";

6. IEPNGFIX.HTC と Blank.gif を Web サイトのフォルダーにコピーして貼り付けます。 ️実行するには、上記のコードを次のように変更します。この JavaScript は、IE6 の場合にのみ呼び出されて実行されます:
/iepngfix_tilebg.js">


利点:
1. 設定後は、通常どおり png 画像を導入するだけでよく、png の相対性を考慮する必要はありません。 html パスの問題に関しては、ディレクトリが変更されたときに、htc ファイルまたは htc ファイルを変更するだけで済みます。 CSS内のパス。
2. タイル属性をサポートします。
3. Img タグをサポートしません。
4. Hover およびその他の疑似クラスをサポートしません。
1. 合計 3 つの js、画像、htc を導入します。
2. サポートしません。 CSS スプライト;
3、ファイルがロードされる前に、灰色の背景が表示されます。
1. png を導入する画像がない場合に検討できます。 CSS スプライトは必要ありません。
3. PNG 画像の比較 頻繁に変更を行う場合は、それを検討してください。


htc ソリューション - デモの入り口






オプション 3 - 純粋な CSS ソリューション:

概要:は純粋な CSS ソリューションであり、計算のみに JavaScript も使用します。ただし、残念ながら、このソリューションは img タグのみをサポートしており、背景画像には無効です。


ディレクトリの説明:

アイデア:
1. まず、透明な画像ファイル blank.zip (707 バイト、ダウンロード時間: 1923) をダウンロードします。
2. 透明に設定する必要があるスタイルに以下のコードを追加します。ダウンロードしたばかりの透明な画像の場合、パスは HTML ファイルの位置を基準としています (CSS ファイルを基準としていません!)。 == "IMG" && this.src.toLowerCase()。 IndexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='" + this.src + "', sizingMethod='image')",this.src = "images/blank.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url(" ','').replace('")',''),this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this .origBg + "', sizingMethod='crop') "、this.runtimestyle.backgroundimage =" none "））、this.pngset = true）;
}


アドバント：sassy厄介なファイルはもうありません。基本的に追加のファイルはなく、効率はかなり良いです。


欠点:
1. 存在すべきではない追加の空の .gif 画像ファイルが導入されます。
2. 背景画像はサポートされていません。
3. ファイルがロードされる前に、灰色の背景が表示されます。 Hover などの疑似クラスはサポートされていません。


使用法:
1. ほとんどの透明な PNG が img タグに存在する場合に考慮してください。 2. 背景画像がある場合は、上記の背景画像のサポートを参照してください。 2 つの方法;


純粋な CSS ソリューション - デモの入り口






ソリューション 4 - ネイティブ JavaScript ソリューション:

導入: オプション 1 のフィルター原則を使用して実装しますが、この JavaScript は読み取られないため、スタイルを取得しますcss ファイル内にあるため、このソリューションも img タグのみをサポートし、背景画像には無効です。

ディレクトリの説明:

アイデア:
1. まず、この透過的なソリューションで使用される js ファイル iepngfix.zip (1.25 KB、ダウンロード数) をダウンロードします。 :2810)

2. この JS は IE6 を使用する場合にのみ役立つため、ページをより効率的に実行するために、この JavaScript は IE6 の場合にのみ呼び出されて実行されます:

6]>< script type="text/javascript" src="js/iepngfix.js">

利点:
コードは次のようになります。非常にエレガントです。基本的に追加のファイルはなく、効率は非常に優れています。


短所: 1. http リクエストを増やすために追加の js ファイルが追加されます。
2. 背景画像はサポートされていません。
3. ファイルがロードされる前に、灰色の背景が一時的に表示されます。
4. ホバーは機能しません。サポートされている疑似クラスとその他の疑似クラス;


使用法:
1. ほとんどの透明な PNG が img タグに存在する場合に考慮してください。
2. 背景画像がある場合は、上記の背景画像をサポートする 2 つの方法を参照できます。


ネイティブ JavaScript ソリューション - デモの入り口






オプション 5 - jQuery ソリューション:

はじめに: jQuery は私たちに大きな利便性をもたらしました。jQuery は私たちをあまり失望させませんでした。img と png は同時にサポートされています唯一の欠点は、タイル化できないことと、CSS Sprite が使用できないことです。


ディレクトリの説明:

思考: 首 1. まず、このソリューションで使用される js ファイルと透明な GIF & lt; iGnore_js_op & gt; jQuerypngfix.zip (2.7 kb、ダウンロード数: 3697) をダウンロードします。
2. BLANKGIF を見つけます: 'Images/
3. この js は IE6 を使用する場合にのみ役立つため、ページをより効率的に実行するには、次のようにします。上記のコードは、IE6 の場合にのみ呼び出されて実行されます:
;


利点:
1. CSS コードは次のようになります非常にエレガントです。簡単な構成のために js を導入するだけで済み、効率は非常に優れています。
2、背景画像、画像をサポートします。
1. 追加の js ファイルと画像ファイルが追加されます。
2. 巨大な jQuery クラス ライブラリがロードされます。
3. 複数のライブラリが共存する場合に問題が発生します。
5. CSS スプライトはサポートされません。ファイルがロードされると、灰色の背景が一時的に表示されます。


7. ホバーおよびその他の疑似クラスはサポートされていません。
プロジェクトで jQuery を使用する場合に検討してください。デモの入り口






ソリューション 6 - PNG8 形式の画像ソリューション:

はじめに: png8 と gif の両方の 8 ビット透明度、IE6 は本質的に png8 インデックス付きカラー透明度をサポートしていますが、8 ビットを超える png またはアルファ透明度はサポートしていません。アニメーション以外の GIF の場合は、サイズが小さくなるため、PNG8 を使用することをお勧めします~

アイデア: IE6 で PNG 画像の透明性をサポートする最も簡単で安全な方法 (少し共有)

利点と欠点: ここをクリックしてください

に進みます。

オプション 7 - DD_belatedPNG ソリューション:

はじめに: 現在使用されている PNG 画像の透明ソリューションは、基本的にフィルター、Xpression、透明 gif 置換を使用することで解決されることは誰もが知っています。ただし、これらの方法には欠点があります。それは、CSS でのbackground-positionとbackground-repeatをサポートしていないということです。今回の js プラグインは描画に Microsoft の VML 言語を使用しており、他のファイルの導入を必要としません。img タグや hover 疑似クラスも、小さな js で完全に解決できます。


ディレクトリの説明:

アイデア:
1. まず、このソリューションで使用されるファイル DD_belatedPNG.zip (3.76 KB、ダウンロード時間: 4610) をダウンロードします。
2. ダウンロードしたばかりの js ファイルを導入します。これは IE6 でのみ有用であるため、ページをより効率的に実行するために、この JavaScript は IE6 の場合にのみ呼び出されて実行されます:

3. 関数を呼び出し、パラメータを次のように設定します。
DD_belatedPNG.fix("# PNGIMG,#PICS,#PICSREPEAT ");

送信されるパラメータは、PNG 画像で使用されるラベルの ID、スタイル、ラベル名であり、
dd_beltedpng.fix と記述することもできます。 ("#Content img ");
このメソッドは、#Cink の下にあるすべての IMG タグが透明であることを示し、リンクとリンクの透明度を設定すると、以下のバージョンに従って記述できます。はい、ただし、保険のために、 hover:
DD_belatedPNG.fix("#links,#link:hover");

これを記述し、jQuery または CSSQuery クラスを使用したことがある場合は、以下を追加することをお勧めします。この選択方法は、簡単に言うと、CSS で要素を選択し、次にこの JS 関数 (メソッド) に何を渡すかというものですが、複数の選択が行われた場合は、カンマを使用してそれらを区切るだけです。 。


この方法を使用する際の KwooShung のヒント: ページ内に多数の png がある場合、DD_belatedPNG.fix() 関数のパラメーターは非常に長くなりませんか?この記述方法を使用できます: DD_belatedPNG.fix(".pngFix,.pngFix:hover");

上記の記述方法を使用する場合、必要なのは HTML 内の対応するタグに class="pngFix" を追加することだけです。複数のスタイルがある場合は、複数のスタイルの通常のスタイルに従って class = "ABC CBC PNGFix" を使用できます。この方法を使用する場合、<script> タグのみが機能します。これはよくありません。http リクエストが増加する場合は、DD_belatedPNG.js ファイルを開いて、最後に次のコードを追加します: <br /> window.onload = () <br /> pngfix、.pngfix: ホバー"); <br />} <br /><br /> したがって、この JS を導入する必要があるのは、透過的、シンプル、便利、高速である必要があるため、class = "pngfix" を追加するだけです。 <br /><br /><br />利点: 1. CSS コードを変更する必要はありません。通常のアイデアに従って記述するだけです。 <br /> 3. 冗長な gif 画像は必要ありません。 <br /> 5.タイルをサポートします。 <br /> 6. CSS スプライトをサポートします。 <br /><br /> 欠点: 1. 追加の js ファイル (6.39k) が追加されますが、これは無視できます。ファイルがロードされる前に、最初に灰色の背景が表示されます。 <br /> 3. js ファイルが多すぎると、エラーが報告され、js が正常に実行されなくなることがあります (この状況はめったに発生しないため、無視できます)。 <br /><br /><br />使い方: <br /> 1. 現在、6 つの方法のいずれも問題を解決できない場合に検討できます。 <br /> 2. PNG 画像が多すぎるため、前の方法を使用します。メソッドによっては、CSS コードが過剰になる可能性があるため、このファイルを導入することをお勧めします <br /><br /><br />DD_belatedPNG ソリューション - デモの入り口 <br /><br /><br /><br /></script>

ソリューション 8 - EvPng ソリューション:

はじめに: このソリューションは 7 番目のソリューションに似ており、使用方法はまったく同じで、効果は非常に優れています。

ディレクトリの説明:

アイデア:
1. まず、このソリューションで使用されるファイル EvPng.zip (3.39 KB、ダウンロード時間: 28 43) をダウンロードします。
2. 7 番目のオプションの使用方法を参照してください。


利点: 1. CSS コードを変更する必要はありません。通常のアイデアに従って記述するだけです。
3. 冗長な gif 画像は必要ありません。
5.タイリングをサポートします
6. CSS スプライトをサポートします


欠点: 1. 追加の js ファイル (ファイル 4.93k、DD_belatedPNG の 6.39k より小さい) が追加されます。これは無視できます。
2. ファイルがロードされる前に、灰色の背景が一時的に表示されます。
3. js ファイルが多すぎると、エラーが報告され、js が正常に実行されなくなることがあります。まれなので無視してください);
4. CSS スプライト技術を使用したホバー効果は、場合によっては上部に 1 ピクセルのずれが生じることがあります。


使い方:
1. 現在の 7 つの方法では問題を解決できない場合に検討できます。
2. DD_belatedPNG の効果が理想的でない場合に検討できます。


提案者: この投稿の 60 階、 moxuanyuanの子供用靴を共有していただきありがとうございます。


EvPng ソリューション - デモエントリー