我尝试用Photoshop文件中的方法来处理图像a-将图像的饱和度降低到灰度,然后用多重混合模式应用颜色叠加。为此,我用...
.someclass
{
/* grayscale */
-webkit-filter: grayscale(1);
filter: gray;
filter: grayscale(1);
filter: url(desaturate.svg#greyscale);
/* multiply */
background-color: rgba(190, 50, 50, 0.65);
background-blend-mode: multiply;
}
这样做的问题是,灰度滤镜最终会降低混合模式的红色饱和度。换句话说,先进行乘法,然后是灰度。如何切换它,以便先应用灰度,然后再应用混合模式?
我已经为代码创建了一个小提琴(http://jsfiddle.net/g54LcoL1/1/)和一个截图(在Photoshop中制作),我希望小提琴的结果看起来像。最底部的图像,div.grayscale.multiply
,应该是红色的。
3条答案
按热度按时间bfnvny8b1#
你不能用滤镜,但你可以用混合模式来做
混合中的灰度等效值是亮度,图像作为源,纯白色作为背景
因此,背景图像从下到上依次为:
1.白色(作为背景色)
1.您的图像
1.纯红色(现在必须指定为渐变)
混合模式是亮度和多重
第一个
rqmkfv5c2#
混合模式应用于背景图层,然后滤镜应用于整个元素,因此它们处理的是两种不同的事情:在计算出背景(包括略带红色的外观)时,整个元素被滤波器转换为灰度级。
有一个针对图像引用的filter()函数,所以理论上,你应该能够在加载任何图像时对它应用一个滤镜。我认为这是一个想法:
遗憾的是,我认为这还没有在任何地方实现,它只是在过滤器规范的草案版本中。
一般而言,按照与SVG相同的顺序来定义这些类型的“后处理”CSS效果的操作顺序:首先进行滤波,然后进行限幅,然后进行掩模,然后进行混合。
(See混合与合成规范。)所以,恐怕你无法改变这一点。
drnojrws3#
正如Joel在他的评论中提到的,使用
mix-blend-mode
是可能的。在我的例子中,我将使用一个实际的图像而不是背景图像,因为这样更便于访问。如果它必须是一个背景图像,那么您仍然可以使用相同的技术。将图像替换为一个空的div,其背景图像样式如下所示:
此外,我将使用“屏幕”混合模式,而不是“乘法”,因为它演示了颜色删除更清楚。
带颜色去除:
第一次
不去除颜色:
第一个
更多信息可在此处找到:
https://css-tricks.com/almanac/properties/m/mix-blend-mode/