第一步,打开google,输入: html how to display pixel image no aa,然后点击go
我们得到一个结果:
第二步,点击第一个链接 image-rendering | CSS-Tricks
我想答案就在这里了,我的英语不太灵光,我想应该是2 ,大概的意思是图片的对比,颜色和边缘不会有任何平滑和模糊,这个参数特别地用来展现像素画。而pixeladted,采用临近像素scaling,应该也是一种展现方法。我想应该是使用CSS属性:
image-rendering: crisp-edges;
google行,百度就不行了吗?我们用百度搜索下:
然后我看第二条合适,点击: 像素风图案缩放后变模糊(被消除锯齿)的解决办法 - CSDN博客
这个更详细,而且对我这个英文文盲级的选手更合适:
这个解释已经很详细了,让我弄清楚了pixelated和crisp-edges的区别,还附带了代码:
img { image-rendering: optimizeSpeed; image-rendering: -moz-crisp-edges; /* Firefox */ image-rendering: -o-crisp-edges; /* Opera */ image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */ image-rendering: pixelated; -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */ }
遇到问题不妨百度一下,百度不行就google一下。