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应为红色。

enter image description here

Answer 1

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

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

所以背景图片从下到上依次为：

白色（背景色）
你的形象
纯红色（现在必须指定为渐变）

并且混合模式是发光度和乘法

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 2

混合模式应用于背景图层，然后将滤镜应用于整个元素，因此它们处理两种不同的事情：计算背景的时间（包括红色外观）），用滤波器将整个元素转换为灰度。

有一个建议的filter（）函数用于图像引用，因此理论上，您应该能够在加载任何图像时应用滤镜。我认为这是个主意：

.someclass {
    background-image: filter(cat.jpg, grayscale(100%));
    background-color: red;
    background-blend-mode: multiply;
}

可悲的是，我不认为这是在任何地方实现的，它只是在滤波器规范的草案版本中。

通常，按照与SVG相同的顺序定义这些类型的“后处理”CSS效果的操作顺序：首先进行过滤，然后进行剪切，然后进行掩蔽，然后进行混合。

（见Blending & Compositing Spec.）所以，在改变这一点方面你无能为力，我担心。

Answer 3

正如Joel在接受回答的评论中提到的那样，可以使用mix-blend-mode来做到这一点。

在我的例子中，我将使用实际图像而不是背景图像。如果它必须是背景图像，那么您仍然可以使用相同的技术。只需使用具有背景图像样式的空div替换图像。

此外，我还要使用＆＃34;屏幕＆＃34;混合模式而不是＆＃34;乘以＆＃34;因为它更清楚地展示了颜色去除。

删除颜色：

＆＃13;

.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
    filter: grayscale(100%);
}

＆＃13;

<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>

＆＃13;

无色移除

＆＃13;

.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
}

＆＃13;

<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>

＆＃13;

可在此处找到更多信息：

https://css-tricks.com/almanac/properties/m/mix-blend-mode/

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

3 个答案: