Question

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

Answer 1

是，对于某些浏览器，这已经成为可能（例如Chrome和Firefox）。

特别需要mix-blend-mode和CSS filters。

以Lenna图片为例的

Here's a 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来“淡化”效果，类似于非锐化蒙版的“强度”设置）可以帮助为特定用例产生更多可取的结果。

Answer 2

我发现了一个可以使用CSS锐化缩小图像的黑客攻击。它仅适用于Chrome，但根据我的经验，Chrome似乎比其他浏览器更模糊图像。这将基本上＆＃34;撤消＆＃34;模糊，使图像看起来更像原始。使用绝对定位将图像叠加在自身顶部，并将image-rendering设置为pixelated。这里给出一个例子：

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

如何在CSS中锐化图像？

2 个答案: