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

Posted 2021-04-09

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

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

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

答案

这是一个使用带有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/