如何在CSS中锐化图像？

如果我从任意URL(本地或远程)加载图像,并且不想使用 javascript或服务器端处理,是否可以使用CSS从客户端锐化它？

解决方法

是的,对于某些浏览器,这已经成为可能(例如Chrome和Firefox).

特别是,您需要mix-blend-mode和CSS filters.

Here’s a 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,.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>

将鼠标悬停在图像上可查看效果.调整参数(并且可能使用不透明度来“淡化”效果,类似于非锐化蒙版的“强度”设置)可以帮助为特定用例产生更期望的结果.