如何使用CSS锐化图像？

Question

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

- Camilo Martin

---

这个问题需要一个更新的答案。CSS滤镜样式中是否有sharpen()滤镜？它有一个blur滤镜。能否通过卷积矩阵来实现？ - undefined

Answer 1

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

具体来说，您需要使用mix-blend-mode和CSS过滤器。

这里有一个CodePen示例，其中包含Lenna图像以及其编译后的代码片段:

.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来“淡化”效果，类似于unsharp mask的“强度”设置）可帮助产生更理想的特定用例结果。

- Camilo Martin

---

这很有趣。然而，使用CSS滤镜会严重影响浏览器的性能（只需将鼠标悬停在结果图像上并滚动，然后再次重复而不悬停在图像上，效果就很明显，无需查看诊断工具中的帧速率）。我认为在实际的现实世界应用中，这在不久的将来不会是实用的，对吗？ - Billy

@Billy 取决于浏览器，我在 Chrome 上甚至都没有注意到，在 Firefox 上略微有点，但只是轻微的。我只能期望随着时间的推移，情况会变得更好，而“复杂”的 CSS 选择器曾经是性能杀手，现在看看我们在哪里。另一方面，我选择的半径可以减小，如果使用 SVG 而不是 CSS 实现，应该会更快，因为浏览器应该缓存生成的渲染（但我没有尝试过）。 - Camilo Martin

Codepen缺少要悬停的图片..当我使用一张图片来查看效果时，+1 :) - Jonathan Marzullo

服务不错...我信任了一个链接缩短器！ :) - Camilo Martin

Answer 2

我找到了一种使用CSS锐化缩小图像的方法。它只在Chrome浏览器中有效，但从我的经验来看，Chrome似乎比其他浏览器更容易模糊图像。这将基本上“撤销”模糊，并使图像看起来更像原始图像。使用绝对定位将图像覆盖在自身上，并将image-rendering设置为pixelated。以下是一个示例： 奇怪的CSS技巧，用于锐化图像（仅适用于Chrome 59和60）

- Ethanoid

---

这并不会使其更加清晰，而是会使其更加嘈杂（几乎可以算作人工细节）。最近邻法在缩小图像时效果不佳，因为它是不可预测的；考虑一下它对高分辨率织物的影响，通过对任意像素进行采样而不是平均值，从而使灰色织物看起来充满了嘈杂的黑白点（还要考虑：半色调扫描）。能够指定更清晰的算法将是有益的，以增加锐度。 - Camilo Martin