Css 圆圈图标在网站上有直边

我在我的网站上使用了一些圆圈图标，它看起来很好，但当我仔细观察它时，我可以看到所有四个方向的直边。我放大，我能清楚地看到它。我尝试使用图像渲染的所有选项，但无法修复它。在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;

我尝试了所有其他的图像渲染选项，但没有成功。 以下是我的照片：

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

---

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

你不需要使用这么大的尺寸，但是设置一个150ppi的[取决于]px，你会得到一个很好的视图，使用它可以在50px的大小调整到你需要的[取决于]px

如果你放大一个图标，它的质量肯定会像预期的那样下降，而不是用svg格式

您可以使用字体很棒的图标或字形图标，并通过良好的行为调整其大小，请查看此文件夹的底部：

---

是否有在线演示可以查看？这里是JSFIDLE。。。只需增加背景位置的宽度、高度和2个值，只需制作一个像素/英寸比更大的图标（然后可以在不降低质量的情况下调整其大小，或者在svg:V中进行调整）

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