如何锐化 CSS 中的图像？

Question

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

一边

Answer 1

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

特别是，您需要 mix-blend-mode and 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,
.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 到 "fade" 效果，类似于锐化遮罩的 "intensity" 设置）可以帮助为特定用例产生更理想的结果。

Answer 2

我发现了一个可以使用 CSS 锐化缩小图像的技巧。它仅适用于 Chrome，但根据我的经验，Chrome 似乎比其他浏览器更能模糊图像。这基本上会 "undo" 模糊并使图像看起来更像原始图像。使用绝对定位将图像叠加在自身之上，并将 image-rendering 设置为 pixelated。这里给出了一个例子：

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

如何锐化 CSS 中的图像？

How to sharpen an image in CSS?

image

css

image-processing

client-side