如何在CSS中锐化图像？

Question

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

Answer 1

是的,对于某些浏览器,这已经成为可能(例如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/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用于"淡化"效果,类似于非锐化掩模的"强度"设置)可以帮助产生针对特定用例的更期望的结果.