缩放CSS sprite像素艺术时不进行图像平滑处理

Question

我正在尝试扩大 CSS 精灵像素艺术图像，并希望完全禁用抗锯齿/图像平滑处理。

根据这篇文章：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中，它有所帮助，但仍然会出现一些图像插值/平滑/抗锯齿问题。

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

是否有一种方法可以在其他浏览器中实现与“-moz-crisp-edges”相同的结果？

- Occam

---

请看这里：https://dev59.com/KW865IYBdhLWcg3wR8ah#8888964 - GibboK

Answer 1

不好的消息：

很遗憾，看起来您的选择只能是使用画布(canvas)、使用JavaScript或者接受Chrome和IE中的反锯齿效果。

如果您不想接受反锯齿效果，以下是一些可能帮助您解决问题的答案：

链接：

1. 仅使用JavaScript的解决方案-旧的、慢的，但适用于所有浏览器
2. 使用画布(Canvas)的解决方案-新的、更快的，但不适用于非兼容浏览器

很抱歉，没有更好的消息可以告诉您。

- Josh Burgess

Answer 2

image-rendering: pixelated;

应该可以在2023年的Chrome上工作。确保精灵是正方形分辨率（即2的幂次方）。

- TankorSmash