如何在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)，这已经成为可能.

Yes, for some browsers this is already possible (like Chrome and Firefox).

尤其是，您需要 mix-blend-mode 和 CSS过滤器.

这是一个以Lenna图片为例的Codepen ，以及它的(编译后的)副本作为代码段:

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>

将鼠标悬停在图像上以查看效果.调整参数(可能使用 opacity 来淡化"效果，类似于不锐化蒙版的强度"设置)可以帮助针对特定用例产生更理想的结果.

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.

这篇关于如何在CSS中锐化图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！