使用CSS和SVG滤镜模拟Photoshop RGB级别
本文介绍了使用CSS和SVG滤镜模拟Photoshop RGB级别的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我以前也这样做过,我知道它的存在,但由于某种原因,我现在找不到它(浪费了几个小时,但没有成功)。
我要通过CSS
模拟Photoshop
RGB
级别。
在下图中,我将中间值从1更改为0.5。
我希望获得与css相同的效果(或至少尽可能接近)。
我尝试了以下代码:https://jsfiddle.net/txwu3so5/
我需要找到一些替换代码才能达到这种效果。实际代码会影响白色(我不希望这样)。
在Photoshop
中,我通常从1更改为不同的值,例如:0.75、0.5等。我想用CSS
以某种方式模拟这一点。我记得我使用的代码与上面的代码非常相似,唯一需要更改的是替换代码。
[编辑1]
这是另一个问题的一部分。要求使用SVG
filter
标记。
推荐答案
要从PhotoShop中完全复制RGB级别功能,您需要三个滤镜组件:一个feComponentTransfer/Gamma和两个feComponentTransfer/Tables。如果您只是如上所述调整中间轴的值,则只需要第一个feComponentTransfer。要阅读有关ComponentTransfers工作原理的更多信息,请参阅webplatform docs(尽管它们已经开始腐烂。
这篇关于使用CSS和SVG滤镜模拟Photoshop RGB级别的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!