css - Firefox 和 Opera : SVG & background-size results in bad rendering

Question

我在页面上有一些元素使用 SVG 文件作为背景图像。它在 Opera、Chrome 和 Safari 中运行良好，只有 Firefox 渲染的图形真正像素化。

我已经搜索过那个主题，SO 上什至有一些类似的问题:
SVG rendering badly in Firefox
Firefox not anti-aliasing scaled background svg
Firefox SVG graphics blurry

一些建议是不要使用 background-size 过度缩放 SVG。并给它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 和 voilà，SVG 渲染得像它应该的那样清晰 - 但现在 Opera 渲染它有点模糊/非常糟糕!此外，放大时，图形会被“截断”。因此，图形似乎没有按比例缩放，而是在其框内进行了放大。有什么解决办法吗？

有趣的是:作为按钮的背景图像，它呈现模糊。作为输入字段中的背景图像，它呈现为“过于清晰”，我称之为。

Answer 1

请在您的样式表中添加以下元素类

img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }