14

我正在尝试以与 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应该是红色的。

在此处输入图像描述

4

3 回答 3

11

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

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

所以背景图片，从下到上，是：

  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>

于 2015-03-02T19:40:10.030 回答
2

混合模式应用于背景层，然后过滤器应用于整个元素，所以它们有点处理两个不同的事情：在计算背景（包括红色外观）时，使用过滤器将整个元素转换为灰度。

有一个建议的 filter() 函数用于图像参考，因此理论上，您应该能够在加载任何图像时对其应用过滤器。我认为这是一个想法：

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

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

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

（请参阅混合和合成规范。）因此，恐怕您无法改变它。

于 2014-10-01T12:47:40.600 回答
1

正如乔尔在接受的答案下的评论中提到的那样，可以使用mix-blend-mode.

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

此外，我将使用“屏幕”混合模式而不是“相乘”，因为它更清楚地展示了颜色去除。

带颜色去除：

.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
    filter: grayscale(100%);
}
<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>

不去除颜色：

.image-wrapper {
    background: red;
    display: inline-block;
}

.image-wrapper img {
    mix-blend-mode: screen;
}
<div class="image-wrapper">
    <img src="https://static.decalgirl.com/assets/designs/large/clrkit.jpg" alt="Colorful cats"/>
</div>

更多信息可以在这里找到：

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

于 2017-02-20T08:44:45.687 回答