1

CSS3 フィルター プロパティを使用して、Chrome と Firefox で同様の結果を得ようとしていますが、構文と実装はブラウザーごとに異なります。

Chrome では、次の CSS を使用して画像にぼかし効果を適用しています。

#chrome-blur {
    -webkit-filter: blur(10px);
}

Firefox では、ページの本文で SVG フィルターを参照するぼかし効果を適用するために、次の CSS を使用しています。

#firefox-blur {
    filter: url(#blur);
}

これはすべて正常に機能しますが、Firefox バージョンではぼやけた画像にバンディングが表示されます。SVG フィルターを機能させる必要があるのか​​、それとも Firefox のアルゴリズムに問題があるのか​​疑問に思っています。

http://codepen.io/vcurd/pen/pDwqrの完全な例

4

1 に答える 1

0

MacOS では見栄えがよく、バンディングがないため、これは Windows (少なくとも Vista) でのみ発生するようです。Firefox の Windows でのグラデーションの実装も同様に悪いため、使用しているネイティブ グラフィックス コールが原因であると思われます。画像をぼかす前にダウンサンプリングする効果を持つ filterRes でフィルター解像度を下げることにより、特定の画像の最悪のバンディングを取り除くことができます。

<filter id="blur" filterRes="60">

いい結果になりそうです。欠点は、これが MacOS でピクセル化されて見えることです。

ノイズやディスプレイスメント マップを追加したり、複数の異なるぼかしを合成したり、カラー補間フィルターやイメージ レンダリングなどの CSS 設定を試したりしましたが、ダウンサンプリングするだけでなく、何も修正されませんでした。

于 2012-10-22T07:45:37.470 に答える