Image 如何在CSS中锐化图像？

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

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

特别是，你需要和

以Lenna图像为例，将其（编译）副本作为代码段：

.foo，
巴尔先生，
.bar：：之后，
巴兹先生{
宽度：512px；
高度：512px；
位置：绝对位置；
}
傅先生{
z指数：1；
混合模式：亮度；
不透明度：0；
溢出：隐藏；
-webkit过滤器：对比度（1.25）；
过滤器：对比度（1.25）；
}
.foo:悬停{
不透明度：1；
}
巴尔先生，
.bar：：之后，
巴兹先生{
背景：url(https://upload.wikimedia.org/wikipedia/en/7/7d/Lenna_%28test_image%29.png);
}
.bar：：之后{
内容：''；
-webkit过滤器：模糊（4px）反转（1）对比度（0.75）；
滤镜：模糊（4px）反转（1）对比度（0.75）；
混合模式：叠加；
}

---

我发现了一种可以使用CSS锐化缩小的图像的方法。它只适用于Chrome，但根据我的经验，Chrome似乎比其他浏览器更能模糊图像。这将基本上“撤销”模糊度，使图像看起来更像原始图像。使用绝对定位将图像分层，并将

图像渲染

设置为

像素化

。此处给出了一个示例：

---

这很有趣。但是，使用CSS过滤器将严重影响浏览器的性能（只需将鼠标悬停在结果图像上并滚动，然后在不将鼠标悬停在图像上的情况下重复，效果很明显，无需查看诊断工具中的帧速率）。“我认为在不久的将来，这在实际应用中是不现实的，对吧？”比利说-依赖于Chrome，我甚至没有注意到，在Firefox上有点，但只有一点点。我只能期望随着时间的推移，这会变得更好，“复杂”CSS选择器在不久前是一个性能杀手，看看我们现在的处境。另一方面，我选择的半径可以减小，如果用SVG而不是CSS实现，速度应该会更快，因为浏览器应该缓存生成的渲染（但我没有尝试）。代码笔缺少要悬停的图像+1当我使用一个图像来查看效果时：）很适合我。。。我信任一个链接缩短器！：）但这并没有使它更清晰，反而使它更嘈杂（几乎算作人工细节）。最近邻不利于缩小尺度，因为它是不可预测的；考虑一下它会对高分辨率织物做什么，通过采样任意像素而不是平均值，从而使灰色织物看起来充满噪声的黑白点（也考虑：半色调扫描）。为了提高效率，能够指定更清晰的算法将是一件好事。