缩放图像时禁用抗锯齿function

可能重复：
如何在没有抗锯齿的情况下拉伸图像

放大图像时是否有可能禁用抗锯齿function？

现在，我得到了这样的东西：

使用下面的CSS代码：

#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px; background-repeat:no-repeat;} 

我想要的是这样的：

简而言之，任何CSS标志都可以在放大图像时禁用消除锯齿，保留硬边缘。

任何JavaScript黑客或类似的也欢迎。

（是的，我知道php和imagemagick也可以做到这一点，但更喜欢基于CSS的解决scheme。）

更新提出了以下build议：

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

但是，这似乎并不适用于背景图像。

Answer 1

试试这个，它是在所有浏览器中删除它的修复程序。

 img { image-rendering: optimizeSpeed; /* STOP SMOOTHING, GIVE ME SPEED */ image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Chrome (and eventually Safari) */ image-rendering: pixelated; /* Chrome */ image-rendering: optimize-contrast; /* CSS3 Proposed */ -ms-interpolation-mode: nearest-neighbor; /* IE8+ */ } 

资料来源：

http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers

http://updates.html5rocks.com/2015/01/pixelated

GitaarLAB

Answer 2

仅适用于Firefox的 CSS 仅适用于：

 img { image-rendering: -moz-crisp-edges; } 

它为我工作（ 火狐16.0 ）