如何锐化CSS中的图像？(How to sharpen an image in CSS?)

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

If I have an image loaded from an arbitrary URL (local or remote), and do not want to use javascript nor server-side processing, is it possible to sharpen it from client-side with CSS?

最满意答案

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

特别是，您需要mix-blend-mode和CSS过滤器 。

下面是 Lenna图像的一个codepen ，以及一个作为代码片段的（编译的）副本：

.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/2/24/Lenna.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来“淡化”效果，类似于不锐利掩模的“强度”设置）可以帮助在特定的使用情况下产生更多期望的结果。 
Yes, for some browsers this is already possible (like Chrome and Firefox).
 
In particular, you need mix-blend-mode and CSS filters.
 
Here's a codepen with the Lenna image as example, and a (compiled) copy of it as a code snippet:
 
 
 
  
  
.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> 
  
 
 
Hover over the image to see the effect. Tweaking of parameters (and maybe using opacity to "fade" the effect, similar to the "intensity" setting of unsharp mask) can help in yielding more desireable results for particular use-cases.