Js または CSS フィルターを使用して、IE6 IE6PNG で PNG 画像の半透明効果を適切に実現する_html/css_WEB-ITnose

次に、IE6 で PNG 画像が不透明になるためのいくつかの解決策を紹介します

1. 独自の PNG を使用し、IE6 を解放します

まず、PNG 画像を作成するときに、GIF 画像として保存します。 GIF 画像の透明度をサポートし、それを CSS で定義します

.pngtest{ background:url(mark.png); _background:url(mark.gif);}

長所: 便利、高速、そして非常に簡単に使用できます

短所: 部分的にしか透明でない PNG 画像の場合、この方法はより効果的ですが、画像は半透明です。この方法は実現できません

この方法を拡張する別の解決策: PS または他の画像編集ツールを使用して、PNG 画像を 8 ビット形式で保存し、IE6 が透明度をサポートするようにします

2. CSS フィルターを実装します。 PNG 画像は半透明です

.pngwrap{ padding:80px; background:green;}.pngtest{ width:165px; height:50px; overflow:hidden; text-indent:-9999em;background:url(http://www.qmtx3.com/data/mark/mark.png) no-repeat;_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='http://www.qmtx3.com/data/mark/mark.png' sizingMethod='scale' enabled=true);}

PNG 画像の透明度の問題を解決するために CSS フィルターを使用する IE6 のテスト

コードの説明: _ プレフィックスが付いた css 属性は IE6 でのみ認識できます。なぜ _background なのかについては次のとおりです。 none; が追加されます。その理由は、定義された背景イメージ (属性の Z インデックスとして理解できます) のレイヤー深度がフィルターのレイヤー深度よりも高いため、フィルターによって定義されたイメージがブロックされるためです。ここで、IE6 の背景は none に設定する必要があります。PS: フィルター内の画像パス。相対パスを使用する場合は、CSS ではなくページに対する相対パスにする必要があります。

利点: JS パッチは必要なく、単なる PNG 画像であるため画像の維持コストが低くなります

欠点: フィルターで定義された画像は、background-position: (位置決め) background-repeat: をサポートしていません。 ; (tile) 属性があるため、CSS Sprite 技術が使用できず、リンク a タグにこのメソッドを適用すると、リンクがクリックできない場合があります。 a タグの位置:relative

3. HTC プラグイン PNG イメージ IE6 を許可します

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

IE6 ブラウザ PNG 画像の透過 HTC プラグインをダウンロードします

iepngfix.htc およびblank.gif ファイルを Web サイトのディレクトリにコピーします (blank.gif、iepngfix.gif をコピーします)。 htc、iepngfix_tilebg.js (このファイルは位置属性と繰り返し属性をサポートするために不可欠です) を特定の場所にコピーします。)

定義は次のように PNG 画像のタグで定義されます。CSS スタイル

img,div{behavior:url(iepngfix.htc);}

修正iepngfix.htc IEPNGFix.blankImg = 'images/blank.gif'; のパスは画像のパスです

IE6 ブラウザに JS ファイルをロードさせます

<!--[if IE 6]><script type="text/javascript" src="../js/iepngfix_tilebg.js"></script><![endif]-->

利点: これを設定すると、サイト全体が次のようになります。非常に使いやすく、一度設定すれば一生使えます

短所: 相対的な設定方法、Web サイトにはさらに 3 つのファイルがあり、要素ホバーなどの疑似クラスはサポートされず、CSS スプライト テクノロジーは使用できません。ページが読み込まれると、PNG 画像の透明な領域が灰色になることを確認してください。

4. CSS バージョンの JS ソリューション

このメソッドには、3 番目のメソッドの圧縮パッケージに含まれる透明なblank.gif画像も必要です。ここでは個別に CSS スタイルを定義しません

img{_azimuth:expression(this.pngSet?this.pngSet=true:(this.nodeName == "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 = "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);}

コードの説明: this.src = "blank.gif" パスも CSS ファイルではなくページ ファイルに対して相対的です

利点: このメソッドは比較的シンプルです

欠点: 透明な画像blank.gifを追加する必要があり、imgタグのみをサポートし、要素の設定をサポートしません PNGの背景画像は要素のホバーおよびその他の疑似クラスをサポートしません。

5. オリジナルの JavaScript ソリューション

IE6 PNG 画像の不透明度を解決するための JavaScript 用のプラグインが多数あります

プラグイン 1 つ: iepngfix ダウンロードIE6 ブラウザ PNG 画像の透過 iepngfix プラグイン

IE6 ブラウザに JS ファイルをロードさせます

<!--[if IE 6]><script type="text/javascript" src="js/iepngfix.js"></script><![endif]-->

プラグイン 2

: DD_belatedPNG このプラグインは、実際の 1 つのプラグインと見なされるべきです使い方は非常にプラグインです

IE6 ブラウザ用の DD_belatedPNG プラグインをダウンロード PNG 透過画像

このブログのバックアップ: DD_belatedPNG.js

<!--[if IE 6]><script type="text/javascript" src="js/DD_belatedPNG.js"></script><![endif]-->

使用法:

DD_belatedPNG.fix(".pngtest,#pngtest,.pngtest img,.pngtest:hover");

れーい

fix() パラメータは透明な要素またはサブ要素に渡す必要があります。このメソッドは基本的に jQuery の $ の選択と同じですが、jQ ではスペースを使用するのに対し、複数の要素は「,」で区切られます。ファイルの最後に追加できます

w3cfuns の解決策は、png を使用する各タグに ID またはクラスを追加してから、

<!--[if IE 6]>    <script type="text/javascript" src="js/DD_belatedPNG.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        DD_belatedPNG.fix("*");    }    </script><![endif]-->

このように、class="pngFix xx bbb" を追加します。 pngFix がクラスに含まれている限り、ページ上で透明にする必要がある要素に適用されます

利点: img タグ、CSS スプライト、背景、タイル、疑似クラスをサポート、何も設定する必要はなく、JS を導入するだけですいいねして使ってください

缺点：加载初期PNG图片会出现灰色

插件三：EvPng

该插件使用方法包括优缺点都跟DD_belatedPNG相同，不再详述

下载IE6浏览器PNG图片透明EvPng插件

<!--[if IE 6]>    <script type="text/javascript" src="js/EvPng.js"></script>    <script language="javascript" type="text/javascript">    window.onload = function(){        EvPNG.fix("*");    }    </script><![endif]-->

 

插件四：jQueryPngFix插件

下载IE6浏览器PNG图片透明jQueryPngFix插件

博客备份：JqueryPngFix

修改pngfix.js文件中blankgif: 'images/blank.gif'透明GIF图片路径为相对页面路径

让IE6浏览器加载JS文件

<!--[if IE 6]><script type="text/javascript" src="js/pngfix.js"></script><![endif]-->

 

优点：支持img、css背景

缺点：需要jQuery库支持，不支持CSS Sprite、平铺、伪类，加载初期会出现灰色

有了这种方法htc的解决方案，显得多于了，不过这里介绍的htc解决IE6 PNG透明问题只是htc功能的冰山一角，htc在其他方面的应用远远比这强大的多

参考：

http://www.w3cfuns.com/forum.php?mod=viewthread&tid=297

http://www.cnblogs.com/rock506/archive/2010/11/30/1892067.html

http://www.xuanfengge.com/ie6-png-transparency-solution.html