带圆圈的图标在网站上有直边

Question

我在我的网站上使用了几个带圆圈的图标，看起来非常精细，但仔细观察时，我可以看到所有四个方向的直边。我放大了，我可以清楚地看到它。我尝试使用所有选项的图像渲染但无法修复它。在Photoshop上它看起来像一个完整的圆圈，但在网站上，它没有正确显示。

background-image: url("../images/location.png") no-repeat;
background-size: 300px auto;
background-position: -10px -10px;
height: 25px;
left: 2px;
top: 10px;
width: 25px;
image-rendering: auto;

我尝试了所有其他选项进行图像渲染，但没有运气。 这是我的图片：

如果你仔细观察，你实际上可以看到直线。这是放大时的直线

Answer 1

这是一个使用带有72ppi的1600x1600px图标的工作示例：

https://jsfiddle.net/v319jLde/14/

//depending means the max value in px you need to show the icon.

你不需要使用如此高的尺寸，但是设置一个[取决] px一个150ppi，你会得到一个很好的视图使用它50px可调整到[取决] px你需要。

如果你放大一个图标，它将会按照预期的那样放松质量，而不是你以svg格式制作它。

你可以使用字体真棒图标或字形，并用一个很好的行为调整它，看看这个组合的底部：

http://joelbonetr.com/