图片放大失真利用CSS抗锯齿

图片 放大 失真 css 抗锯齿

图片放大失真就是看见边缘模糊，显得不好看，这里可以用CSS稍微调整。

.pixelated {
 image-rendering:optimizeSpeed; /* Legal fallback */
 image-rendering:-moz-crisp-edges; /* Firefox */
 image-rendering:-o-crisp-edges; /* Opera */
 image-rendering:-webkit-optimize-contrast; /* Safari */
 image-rendering:optimize-contrast; /* CSS3 Proposed */
 image-rendering:crisp-edges; /* CSS4 Proposed */
 image-rendering:pixelated; /* CSS4 Proposed */
 -ms-interpolation-mode:nearest-neighbor; /* IE8+ */
}

感觉效果不是特别好，还是推荐使用SVG矢量图标不管放大多少都不会出现锯齿。

svg取代传统png/jpg图片格式