76

画像の非透明部分の端に黒いディザ ピクセル アーティファクトを示す透明な PNG 画像に問題があります。これは Internet Explorer でのみ行われ、使用されている Javascript ファイルからのみ行われます。

これが私が話していることです... http://70.86.157.71/test/test3.htm(リンクは現在死んでいます) ...右下隅の女の子に注目してください。彼女は IE8 で自分の周りにアーティファクトを持っています (以前のバージョンの IE ではテストしていませんが、おそらく同じことをしていると思います)。Firefox と Chrome で完全に動作します。画像は Javascript ファイルから読み込まれ、マウスオーバー効果が生成されます。

画像をすべて単独でロードすると、正常に機能します。ここに画像があります... http://70.86.157.71/test/consultant2.png

これを修正する方法は？

画像は Photoshop CS3 で作成しました。

ガマの削除について読んだことがありますが、それは以前のバージョンの Photoshop にあったようで、TweakPNG に読み込むとガマがありません。

4

10 に答える 10

106

修繕！

私は同じ問題に取り組んできましたが、突破口がありました! 画像に背景色または画像を指定すると、その上に png が適切に表示されることが確認されています。黒い境界線はなくなりましたが、背景が不透明になり、目的がほとんど果たせません。

それから、私が出会った rgba から ie へのフィルター コンバーターを思い出しました。（マイケル・ベスターに感謝します）。それで、問題のpngにrgba（255,255,255,0）をエミュレートするフィルタリングされた背景を与えたらどうなるのだろうと思いました.

.item img {
    background: transparent;
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)"; /* IE8 */   
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);   /* IE6 & 7 */      
    zoom: 1;

}

プレスト！黒にさよなら、そして ie7 と 8 でアルファ チャンネルが機能するようになりました。

于 2010-10-22T18:33:50.730 に答える
9

これをjQueryプラグインに入れて、よりモジュール化します（透明なgifを提供します）：

$.fn.pngFix = function() {
  if (!$.browser.msie || $.browser.version >= 9) { return $(this); }

  return $(this).each(function() {
    var img = $(this),
        src = img.attr('src');

    img.attr('src', '/images/general/transparent.gif')
        .css('filter', "progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='crop',src='" + src + "')");
  });
};

使用法：

$('.my-selector').pngFix();

注: 画像が背景画像の場合にも機能します。divに関数を適用するだけです。

于 2011-02-08T21:19:26.493 に答える
7

このスレッドがしばらく死んでいることは知っていますが、古い ie8 png バックグラウンドの問題に対する別の回答があります。

次のように IE 独自のフィルタリング システムを使用して、CSS でも行うことができます。

filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='scale',src='pathToYourPNG');

デモ

背景宣言の「最初の」画像には blank.gif を使用する必要があります。これは単に ie8 を混乱させ、設定したフィルターと背景の両方を使用しないようにし、フィルターのみを使用するためです。他のブラウザーは複数の背景画像をサポートし、背景の宣言を理解しますが、フィルターを理解しないため、背景のみを使用します。

また、フィルターを希望どおりに機能させるために、フィルターの sizingMethod をいじる必要がある場合もあります。

于 2012-08-08T15:48:07.727 に答える
5

不透明度が適用された <A> 要素の背景画像として設定された透明度のある PNG でも同じことが起こりました。

修正は、<A> 要素の背景色を設定することでした。

したがって、次のようになります。

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;

になる：

/* "Overwritten" by the background-image. However this fixes the IE7 and IE8 PNG-transparency-plus-opacity bug. */
background-color: #FFFFFF; 

filter: alpha(opacity=40);
-moz-opacity: 0.4;
-khtml-opacity: 0.4;
opacity: 0.4;
background-image: ...;
于 2012-05-17T20:47:40.530 に答える
4

以下のコードを試してください。

 background: transparent\0/;
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE7 */      
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */
于 2013-04-10T13:46:40.923 に答える
4

IE8 での PNG 透過性の問題

ダンの解決策は私にとってはうまくいきました。背景画像でdivをフェードしようとしていました。警告: div を直接フェードすることはできません。代わりに、ラッパー イメージをフェードします。また、次のフィルターを追加して、背景画像を適用します。

-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png')"; /* IE8 */   
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled='true',sizingMethod='image',src='assets/img/bgSmall.png');   /* IE6 & 7 */

フィルターの src 属性のパスは絶対パスであり、css シートとの相対パスではないことに注意してください。

私も追加しました：

background: transparent\9;

これにより、IE は他のブラウザーの実際の背景画像の以前の宣言を無視します。

ありがとうダン!!!

于 2011-05-12T19:28:09.897 に答える
2

ダンテッロの修正は私にとってうまくいきました。

IE8で私が見つけたもう1つの問題は、PNGがPNGよりも小さいCSS幅または高さの寸法を持つDIVに保持されている場合、黒いエッジの確率が再トリガーされることでした。

幅と高さのCSSを修正するか、それらを完全に削除することを修正しました。

于 2011-02-25T05:23:37.057 に答える
2

JS ではなく CSS 修正を使用して、透明な PNG を内部に含む角の丸いレイヤーを回避します

試す

.ie .whateverDivWrappingTheImage img {
背景: #ffaabb; /* これは実際にあなたのデザインにマッチする背景色でなければなりません */
フィルタ: クロマ(#ffaabb); /* これは、背景色に入力した値と一致する必要があります */
}

これには、ie9 以降でさらに作業が必要になる場合があります。

于 2012-01-30T03:01:29.370 に答える
0

私のシナリオ:

  • アンカー リンクに設定された 24 ビットのアルファ png を持つ背景画像がありました。
  • Jquery を使用してホバー時にアンカーがフェードインしていました。

例えば。

a.button { background-image: url(this.png; }

Dan Tello が提供するマークアップを適用してもうまくいかないことがわかりました。

ただし、アンカー要素内にスパンを配置し、背景画像をその要素に設定することで、Dan Tello のマークアップを使用して良い結果を得ることができました。

例えば。

a.button span { background-image: url(this.png; }
于 2011-07-06T14:12:45.337 に答える
0

追加したいだけです（この問題をグーグルで検索し、この質問が最初に表示されたため）IE6および他のバージョンはPNGの透明度を非常に醜くレンダリングします。アルファ透明 (32 ビット) の PNG 画像があり、複雑な背景の上に表示したい場合、IE で単純にこれを行うことはできません。background-colorただし、その PNG 画像 (または div) の CSS 属性をparents と同じに設定する限り、単色の背景の上に正しく表示できますbackground-color。

したがって、これは画像がアルファ透明であるべき場所を黒くレンダリングし、アルファバイトが 0 の場所を透明にレンダリングします。

<div style="background-color: white;">    
    <div style="background-image: url(image.png);"/>    
</div>

そして、これは正しくレンダリングされます(内側の div の background-color 属性に注意してください) :

<div style="background-color: white;">    
    <div style="background-color: white; background-image: url(image.png);"/>    
</div>

複雑な背景の上にアルファ画像を有効にするこれに代わる複雑な方法AlphaImageLoaderは、特定の不透明度の画像をロードしてレンダリングするために使用することです。これは、不透明度を変更するまで機能します...問題の詳細とその解決策（javascript）は、こちらにあります。

于 2010-10-07T09:01:38.887 に答える