web-dev-qa-db-ja.com

IE8のPNG透過性の問題

画像の透明でない部分のエッジの周りに黒いディザリングされたピクセルアーティファクトを示す透明な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で作成されました。

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

javascriptinternet-explorerinternet-explorer-8pngiepngfix
76
user138777

修正済み

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

それから、rgba to 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のこんにちはアルファチャンネル。PNGをフェードインまたはフェードアウトするか、画面上でアニメートします-それはすべて良いです。

106
Dan Tello

これを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に関数を適用するだけです。

9
Mike Cavaliere

私はこのスレッドがしばらくの間死んでいることを知っていますが、古いie8 png背景の問題に対する別の答えがあります。

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

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

[〜＃〜] demo [〜＃〜]

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

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

7
Fresheyeball

不透明度が適用された<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: ...;
5
Josh Mouch

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

 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 */
4
Kevin G Flynn

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は、他のブラウザの実際の背景画像の以前の宣言を無視します。

ありがとうダン！

4
Andrew

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

試して

。ie .whateverDivWrappingTheImage img {
 background：#ffaabb;/*これは実際にデザインに一致する背景色である必要があります*/
 filter：chroma（#ffaabb）;/*そして、これはあなたがbackground-colorに入れたどんな値とも一致する必要があります*/
}

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

2
Macomatic

Dan Telloの修正は私にとってはうまくいきました。

IE8で私が見つけた1つの追加の問題は、PNGがPNGよりも小さいCSS幅または高さ寸法のDIVに保持されている場合、黒いEdgeプローブが再トリガーされることでした。

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

2
zeniph

（この問題をグーグルで検索し、この質問が最初に表示されたため）IE6と他のバージョンはPNGの透明度を非常にいものにしたいだけです。アルファ透過（32ビット）のPNG画像があり、それを何らかの複雑な背景の上に表示したい場合、IEでこれを行うことはできません。ただし、そのPNG画像（またはdiv）CSS属性background-colorを親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）は [〜＃〜] here [〜＃〜] で見つけることができます。

0
Cipi

私のシナリオ：

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

例えば。

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

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

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

例えば。

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