如何在 CSS 中锐化图像？答案

【问题标题】：How to sharpen an image in CSS?如何在 CSS 中锐化图像？
【发布时间】：2018-11-02 01:14:22
【问题描述】：

如果我从任意 URL（本地或远程）加载图像，并且不想使用 javascript 或服务器端处理，是否可以使用 CSS 从客户端对其进行锐化？

【问题讨论】：

标签： image css image-processing client-side

【解决方案1】：

是的，对于某些浏览器（如 Chrome 和 Firefox），这已经是可能的。

尤其需要mix-blend-mode 和CSS filters。

Here's a codepen 以 Lenna 图像为例，并将其（编译）副本作为代码 sn-p：

.foo,
.bar,
.bar::after,
.baz {
  width: 512px;
  height: 512px;
  position: absolute;
}
.foo {
  z-index: 1;
  mix-blend-mode: luminosity;
  opacity: 0;
  overflow: hidden;
  -webkit-filter: contrast(1.25);
  filter: contrast(1.25);
}
.foo:hover {
  opacity: 1;
}
.bar,
.bar::after,
.baz {
  background: url(https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png);
}
.bar::after {
  content: '';
  -webkit-filter: blur(4px) invert(1) contrast(0.75);
  filter: blur(4px) invert(1) contrast(0.75);
  mix-blend-mode: overlay;
}

<div class="foo">
  <div class="bar"></div>
</div>
<div class="baz"></div>

将鼠标悬停在图像上以查看效果。调整参数（可能使用opacity 来“淡化”效果，类似于不锐化蒙版的“强度”设置）有助于在特定用例中产生更理想的结果。

【讨论】：

这很有趣。但是，使用 CSS 过滤器会严重影响浏览器的性能（只需将鼠标悬停在结果图像上并滚动，并在不悬停图像的情况下重复，无需查看诊断工具中的帧率，效果就很明显）。我认为这在不久的将来在实际的实际使用中是不切实际的，对吧？
@Billy 取决于 - 在 Chrome 上我什至无法注意到，在 Firefox 上有点，但只有一点点。我只能期待这会随着时间的推移而变得更好，而“复杂”的 CSS 选择器在不久前还是一个会扼杀性能的东西，看看我们现在所处的位置。从好的方面来说，我选择的半径可以减小，如果在 SVG 而不是 CSS 中实现它应该更快，因为浏览器应该缓存生成的渲染（但我没试过）。
codepen 缺少图像以悬停在.. +1 当我使用图像查看效果时:)
对我很有帮助...我信任链接缩短器！ :)

【解决方案2】：

我发现了一个可以使用 CSS 锐化缩小图像的 hack。它只适用于 Chrome，但根据我的经验，Chrome 似乎比其他浏览器更容易模糊图像。这将基本上“消除”模糊并使图像看起来更像原始图像。使用绝对定位将图像叠加在自身之上，并将image-rendering 设置为pixelated。这里给出一个例子：

Weird CSS hack for sharpening images (Chrome 59 and 60 only)

【讨论】：

这并没有使它更清晰，它使它更嘈杂（几乎算作人工细节）。最近的邻居不利于缩小规模，因为它是不可预测的；考虑它对高分辨率织物的作用，通过采样任意像素而不是平均值，从而使灰色织物看起来充满嘈杂的黑白点（另请考虑：半色调扫描）。能够指定更清晰的算法会很好，以增加acutance。