【发布时间】：2018-02-02 23:41:12
【问题描述】：
我在 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 位）- 不工作
【问题讨论】：
-
在 Windows 10 + Chrome 60.0.3112.113 上测试，我无法分辨像素化与覆盖 jsfiddle.net/7CURQ/314 之间的任何区别
-
@Valentin 它看起来像示例中给出的非常像素化的图像吗？您是否尝试从代码中删除第一张图像（具有“图像”类的图像）？它适用于 Windows 10 和 7，但我的 Chrome 版本稍旧，60.0.3112.101。
-
无论如何都无法重现该问题，可能是浏览器错误或您的设置问题...
-
@Valentin 我已经在两个不同的系统上尝试过，它们具有相同版本的 Chrome。也许它将在下一次更新中“修复”。为了我自己的利益，当您运行示例代码时，您看到的是第一张图片还是第二张图片？
-
覆盖和像素化对我来说看起来都一样，请参阅this image...
标签： css image google-chrome css-hack image-rendering