如果我从任意URL(本地或远程)加载图像,并且不想使用
javascript或服务器端处理,是否可以使用CSS从客户端锐化它？
解决方法
是的,对于某些浏览器,这已经成为可能(例如Chrome和Firefox).
特别是,您需要mix-blend-mode和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,.baz {
background: url(https://upload.wikimedia.org/wikipedia/en/2/24/Lenna.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>
将鼠标悬停在图像上可查看效果.调整参数(并且可能使用不透明度来“淡化”效果,类似于非锐化蒙版的“强度”设置)可以帮助为特定用例产生更期望的结果.
