仅适用于Chrome 59和60的提高图片清晰度的奇怪CSS技巧

Question

当我将缩小的图片放在自身顶部并设置CSS的image-rendering参数为pixelated时，我遇到了Chrome v60.0中的奇怪行为：

#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位）- 无效。

- Ethan

---

已在Windows 10 + Chrome 60.0.3112.113上进行测试，我无法看出像素化与叠加之间的任何区别http://jsfiddle.net/7CURQ/314/ - Valentin

@Valentin，它看起来像示例中给出的非常像素化的图像吗？您是否尝试从代码中删除第一个图像（具有“image”类的图像）？在我的Windows 10和7上可以正常工作，但我的Chrome版本略旧，为60.0.3112.101。 - Ethanoid

无论怎样都不能重现这个问题，可能是浏览器的 bug 或者你自己设置上的问题... - Valentin

@Valentin 我已经在两个不同的系统上尝试过了，它们都有相同版本的Chrome。也许下一个更新会“修复”它。为了我的利益，当你运行示例代码时，你看到的是第一张还是第二张图片？ - Ethanoid

对我来说，覆盖和像素化看起来一样，参见此图片。 - Valentin

@Valentin 谢谢，我很感激！我已经用各种版本的Chrome进行了测试，并在问题中发布了结果。 - Ethanoid

Answer 1

这不仅适用于CSS。噪点会产生一种清晰或增强细节的错觉，因为像素使边缘更加明显，还有其他原因。许多锐化技术最终会增加噪点的数量，这通常是一个不希望看到的副作用，但是非常小心和微妙地将噪点应用于图像可以创建这种错觉而不明显降低图像质量。

另请参见：为什么在摄影噪点中会有细节的错觉？

- BoltClock

---

这并不是那么简单。这是一个浏览器的怪异问题，问题在于为什么会发生这种情况。它不能归因于噪音/颗粒，因为没有任何噪音的图像（如艺术作品）也会产生相同的效果。 - Ethanoid