用于锐化图像的奇怪CSS黑客（仅限Chrome 59和60）

Question

我在Chrome v60.0中遇到了奇怪的行为，当我将缩小的图像置于其自身之上并将CSS image-rendering参数设置为pixelated时：

#container {
  position: relative;
  width: 160px
}

.image {
  width: 100%
}

.overlay {
  width: 100%;
  position: absolute;
  left: 0px;
  top: 0px;
  image-rendering: pixelated
}

<div id="container">
  <img class="image" src="http://www.publicdomaintreasurehunter.com/wp-content/uploads/2011/01/muscle.jpg">

  <img class="overlay" src="http://www.publicdomaintreasurehunter.com/wp-content/uploads/2011/01/muscle.jpg">
</div>

不像预期的那样出现像素化，而是图像是平滑的（并且比原始图像更清晰）。通常在应用pixelated时，图像看起来非常颗粒状（见下文）。

您可以通过删除容器中的第一个图像并比较结果来测试它。或者删除第二个以查看默认渲染。

但是，有一点需要注意。虽然它可能适用于照片，但在使用艺术品时，某些边缘会出现锯齿状。一种解决方法是介于两者之间并在叠加图像上应用0.4左右的不透明度，至少给出一些清晰度。

对此行为有何解释？它在IE或我尝试的任何其他浏览器中都不起作用。

更新：我在以下32位和64位版本的Chrome中对此进行了测试，结果如下：

60.0.3112.113（64位） - 作品

60.0.3112.101（64位） - 作品

59.0.3071.86（64位） - 作品

58.0.3029.96（64位） - 没有必要使用hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

58.0.3029.96（32位） - 没有必要使用hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

57.0.2987.133（64位） - 没有必要使用hack，因为image-rendering: pixelated已经显示没有像素化的锐化图像

56.0.2924.87（64位） - 不起作用

55.0.2883.75（64位） - 不起作用

53.0.2785.116（32位） - 不起作用

48.0.2564.109（64位） - 不起作用

Answer 1

这对CSS来说并不是唯一的。由于像素使边缘更加明显，噪声/颗粒确实会产生锐度或增强细节的错觉。许多锐化技术最终会增加噪声量，这通常是一种不希望的副作用，尽管非常小心且非常微妙地将噪声应用于图像会产生这种错觉而不会显着降低图像质量。

另请参阅：Why is there the illusion of detail in photographic noise?