保持像素化图像在缩放时保持像素化

这只是一个简单的提醒，CSS 中有一个属性可以帮助控制图像在缩放时的行为：image-rendering。

我们已经习惯了将图像缩放至大于其自然尺寸（上采样）会导致图像模糊的想法。尽管这很糟糕，但浏览器正在尽其所能通过算法将图像平滑到比其数据更多的像素上。但是，假设您真的不想这样做。假设图像已经呈像素化（像素艺术），或者您更喜欢像素化的上采样效果。

您可以做到！

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

有点尴尬的是，规范提供了三个值：auto、pixelated 和 crisp-edges。对于像素艺术来说，pixelated 和 crisp-edges 似乎对我来说效果相同，尽管规范中对它们进行了略微不同的描述（pixelated 建议使用“最近邻”或类似的算法，而 crisp-edges 则没有那么具体）。

更尴尬的是，Chrome 仅支持 pixelated，而 Firefox 仅支持 crisp-edges，为了获得最广泛的浏览器支持，您必须将其添加前缀为 -moz-crisp-edges。幸运的是，您可以将它们全部组合在一起，似乎效果很好。

这是一个有和没有的示例，使用的是James T. 的一张图片。我在 Tumblr 上找到的

查看 CodePen 上 Chris Coyier (@chriscoyier) 编写的像素化图像。

Ken Brazier

# 2018年4月7日

这很有趣。这在几乎所有浏览器上都有效，并且可以通过 -ms-interpolation-mode: nearest-neighbor 在 IE 中模拟，但它在 Edge 上不起作用。

显然，您也可以将其用于背景和画布。（细胞自动机，有人吗？）当然，除了 MS 产品之外。

Šime Vidas

# 2018年4月7日

请注意，image-rendering: pixelated 已由 Autoprefixer 处理；生成的代码是

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

如果有人注意到此输出存在问题，请在 Autoprefixer 的 GitHub 存储库中提交问题。

Nicu Razvan - Gabriel

# 2018年4月8日

背景图像是否也可以这样做？

jgarcianewemage

评论永久链接# 2018年4月9日

是的，应用于元素

eosasakura

# 2018年4月9日

文档中说“此属性适用于元素本身，以及元素的其他属性中提供的任何图像。”所以我想它确实可以，但测试是了解它的最佳方法。

Blitztherapeutin ↯ (@lightnings0ul)

# 2018年4月10日

现在我想用这个构建一个像素艺术网站。:D

此评论线程已关闭。如果您有重要信息需要分享，请联系我们。