缩放CSS精灵像素艺术,无需图像平滑

Question

我试图扩大css精灵像素艺术图像,并希望完全禁用抗锯齿/图像平滑.

根据这篇文章:缩放图像时禁用抗锯齿我尝试了以下css

image-rendering: optimizeSpeed;            
image-rendering: -moz-crisp-edges;         
image-rendering: -o-crisp-edges;           
image-rendering: -webkit-optimize-contrast; 
image-rendering: optimize-contrast;       
-ms-interpolation-mode: nearest-neighbor;   

它的工作方式与我想要的一样,但是在Chrome和IE浏览器中它有点帮助,但仍然会出现一些图像插值/平滑/抗锯齿.

我不想使用canvas元素,而只是坚持使用CSS背景图像sprite.

有没有办法在其他浏览器中实现与"-moz-crisp-edges"相同的结果？

Answer 1

坏消息：

不幸的是，你的选择要么是使用画布、使用 JavaScript，要么是在 Chrome 和 IE 中使用抗锯齿功能

如果您不选择使用抗锯齿功能，以下一些回答可能会帮助您解决其他两个问题之一：

链接：

1. 仅限 Javascript 的解决方案 - 旧、慢，但可以在任何地方使用
2. Canvas 解决方案 - 新的、更快的、不适用于不兼容的浏览器

抱歉，在这方面没有更好的消息给您。