我在页面上有一些使用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渲染它有点模糊/非常糟糕！此外，放大时，图形会“切断”。因此，不是按比例缩放，而是在图标框中放大图形。那有什么问题吗？
有趣的是：作为按钮的背景图像，它呈现模糊。作为输入字段中的背景图像，它会呈现为“过于清晰”，我会称之为。
答案 0 :(得分：1)
请在样式表中添加以下元素类
img {
-ms-interpolation-mode: bicubic;
image-rendering: -moz-crisp-edges;
background:transparent; }