CSS灰度滤镜和背景混合模式同时？

Question

我试图像在photoshop文件中一样对待图像 - 将图像去饱和为灰度,然后应用具有多重混合模式的颜色叠加.为此,我正在使用...设计CSS背景图像.

.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应该是红色的.

Answer 1

您无法使用过滤器,但您可以使用混合模式保持一切

混合中的灰度等效物是光度,图像为源,背景为纯白色

因此,从底部到顶部的背景图像是:

1. 白色(背景色)
2. 你的形象
3. 纯红色(现在必须指定为渐变)

混合模式是光度和乘法

.test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("http://cuteoverload.files.wordpress.com/kitteh_puddle-1312.jpg");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}

<div class="test"></div>