5

背景画像として SVG ファイルを使用する要素がページにいくつかあります。Opera、Chrome、Safari でうまく動作しますが、Firefox だけがグラフィックを実際にピクセル化してレンダリングします。


私はすでにそのトピックについて検索を行いました.SOについても同様の質問がいくつかあり
ます
.

いくつかの提案は、SVG を使用してあまり拡大縮小せず、background-sizeそれを与えることでしたwidth="100%" height="100%"。

私は SVG を 5% だけ拡大します。追加width="100%" height="100%"により、ピクセル化が少し修正されましたが、他のブラウザーに比べてまだぼやけています.

このリンクされたコメントが役に立ちました: http://coding.smashingmagazine.com/2012/01/16/resolution-independence-with-svg/#comment-573707

もともと幅と高さは 22px でした。両方を 200px に設定すると、SVG は本来の鮮明さでレンダリングされますが、Opera では少しぼやけてレンダリングされます。また、ズームインすると、グラフィックが「切れて」しまいます。そのため、比例してスケーリングするのではなく、グラフィックがボックス内で拡大されているように見えます。そのための修正はありますか？

興味深いのは、ボタンの背景画像として、ぼかしてレンダリングすることです。入力フィールドの背景画像として、「過度に鮮明」にレンダリングされます。

4

1 に答える 1

1

スタイルシートの要素クラスの下にこれらを追加してください

img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }
于 2013-11-14T07:28:23.457 に答える