同时使用 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;
}

问题是灰度滤镜最终会降低混合模式下的红色饱和度。换句话说，乘法首先发生，然后是灰度。如何切换它以便首先应用灰度，然后再应用混合模式？

我为代码创建了一个 fiddle ( http://jsfiddle.net/g54LcoL1/1/ ) 和我期望的 fiddle 结果的屏幕截图(在 Photoshop 中制作)。最底部的图像 div.grayscale.multiply 应为红色。

Answer 1

你不能用滤镜来做，但你可以用混合模式来做所有事情

blend 中的灰度等效项是亮度，图像作为源，纯白色作为背景

所以背景图片从下到上分别是:

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

混合模式是亮度和乘法

.test {
  width: 400px;
  height: 400px;
  background-image: linear-gradient(0deg, red, red), url("/image/WIMBV.png");
  background-color: white;
  background-blend-mode: multiply, luminosity;
  background-size: cover;
}

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