在没有图像平滑的情况下缩放 CSS 精灵像素艺术

Question

我正在尝试放大 css sprite 像素艺术图像并希望完全禁用抗锯齿/图像平滑。

根据这里的帖子：Disable antialising when scaling images 我尝试了以下 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;   

它的工作方式完全符合我在 Firefox 中的要求，但在 Chrome 和 IE 中。它有一点帮助，但一些图像插值/平滑/抗锯齿仍在发生。

我不想使用画布元素，而只是坚持使用 CSS 背景图像精灵。

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

Answer 1

坏消息：

不幸的是，您的选择似乎是使用画布、使用 JavaScript 或在 Chrome 和 IE 中使用抗锯齿功能

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

链接：

1. Javascript-Only Solution - Old, slow, but works everywhere
2. Canvas solution - New, quicker, doesn't work in non-compliant browsers

很抱歉，没有更好的消息告诉你。