3

当我在自身顶部放置一个缩小的图像并将 CSSimage-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 或我尝试过的任何其他浏览器。

示例图形显示：(1) 默认渲染，(2) 带有图像渲染，以及 (3) CSS hack

更新：我在以下 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 位）- 不起作用

4

1 回答 1

3

这不是 CSS 独有的。由于像素使边缘更加明显等原因，噪点/颗粒确实会产生锐度或细节增强的错觉。许多锐化技术最终会增加噪点的数量，这通常是一种不受欢迎的副作用，尽管非常小心和非常微妙地对图像应用噪点可以产生这种错觉，而不会显着降低图像质量。

另请参阅：为什么照片噪点会出现细节错觉？

于 2017-08-25T04:33:38.440 回答