CSS 缩放图像时禁用抗锯齿
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14068103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disable antialising when scaling images
提问by Nils Munch
Possible Duplicate:
How to stretch images with no antialiasing
可能的重复：
如何在没有抗锯齿的情况下拉伸图像
Is it in any way possible to disable antialiasing when scaling up an image ?
放大图像时是否可以以任何方式禁用抗锯齿？
Right now, i get something that looks like this :
现在，我得到的东西是这样的：
Using the following css code :
使用以下 css 代码：
#bib { width:104px;height:104px;background-image:url(/media/buttonart_back.png);background-size:1132px 1360px;
background-repeat:no-repeat;}
What I would like, is something like this :
我想要的是这样的：
In short, any CSS flag to disableanti-aliasing from when scaling up images, preserving hard edges.
简而言之，任何在放大图像时禁用抗锯齿的CSS 标志，保留硬边缘。
Any javascript hacks or similar are welcome too.
任何 javascript hacks 或类似的东西也是受欢迎的。
(Yes, I am aware that php and imagemagick can do this as well, but would prefer a css based solution.)
（是的，我知道 php 和 imagemagick 也可以做到这一点，但更喜欢基于 css 的解决方案。）
UPDATEThe following have been suggested :
更新已建议以下内容：
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;
But that doesn't seem to work on background images.
但这似乎不适用于背景图像。
回答by Vargr
Try this, it's a fix for removing it in all browsers.
试试这个，这是在所有浏览器中删除它的修复程序。
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+ */
}
Sources:
资料来源：
http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers
http://nullsleep.tumblr.com/post/16417178705/how-to-disable-image-smoothing-in-modern-web-browsers
http://updates.html5rocks.com/2015/01/pixelated
http://updates.html5rocks.com/2015/01/pixelated
GitaarLAB
吉他实验室
回答by Champ
CSS that works in Firefox Only:
仅适用于Firefox 的CSS ：
img { image-rendering: -moz-crisp-edges; }
It worked for me (firefox 16.0)
它对我有用（firefox 16.0）
