当使用CSS调整大小时，png图标有锯齿状边缘

Question

我遇到了麻烦（把我的头发拉出来！）弄清楚如何平滑我的png图标的边缘。它们通过CSS调整大小，并以263px格式保存为PNG。

我已经尝试过重新安装GIF以及各种CSS黑客： -webkit-backface-visibility：hidden;

理想情况下，我需要一个能够在所有主流浏览器中平滑图像边缘（而不是方形边框）的解决方案，因为它们似乎都在苦苦挣扎并创造锯齿状的边缘。

提前致谢

CSS：

width: 20px; height: 20px;

以下是从我的网站上拍摄的图片：

Answer 1

所有这些都为CSS图像渲染选项提供了潜在的解决方案：

• https://developer.mozilla.org/en-US/docs/Web/CSS/image-rendering
• Disable antialising when scaling images
• http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

Answer 2

#logo {-webkit-transform：initial;}