我正在尝试放大 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 和 I.E.它有一点帮助,但一些图像插值/平滑/抗锯齿仍在发生。
我不想使用 Canvas 元素,而是坚持使用 CSS 背景图像 Sprite 。
有没有办法在其他浏览器中实现与“-moz-crisp-edges”相同的结果?
最佳答案
坏消息:
不幸的是,您的选择似乎要么使用 Canvas ,要么使用 JavaScript,要么在 Chrome 和 IE 中使用抗锯齿功能。
如果您不选择使用抗锯齿,这里有一些响应可能会帮助您解决其他两个问题之一:
链接:
- Javascript-Only Solution - Old, slow, but works everywhere
- Canvas solution - New, quicker, doesn't work in non-compliant browsers
抱歉,关于这方面没有更好的消息。
关于css - 在没有图像平滑的情况下缩放 CSS Sprite 像素艺术,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18318040/