How to sharpen an image in CSS?

北慕城南 提交于 2020-12-29 03:57:32

问题


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?


回答1:


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.




回答2:


I found a hack that will sharpen downscaled images using CSS. It only works in Chrome, but from my experience Chrome seems to blur images more so than other browsers. This will basically "undo" the blurriness and make the image look more like the original. Layer the image on top of itself using absolute positioning and set image-rendering to pixelated. An example is given here:

Weird CSS hack for sharpening images (Chrome 59 and 60 only)



来源:https://stackoverflow.com/questions/29599794/how-to-sharpen-an-image-in-css

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!