在使用背景混合模式之前应用 css -webkit-filter 灰度以保持颜色

Question

我试图在鼠标悬停时实现单色彩色图像，其中图像的颜色转换为灰度，然后灰色阴影替换为我正在混合的颜色阴影。

它可能看起来像this

要在 Photoshop 中模拟这一点，您可以对图像进行灰度化，在顶部添加所需的颜色层并将其与屏幕模式混合。

据我了解，如果您将 css 过滤器和背景混合模式结合使用，css 具有这种潜力，但如果您使用过滤器，结果将始终是灰度。

所以我问是否有任何其他方法来获得这种混合，或者在没有 css 过滤器之前对图像进行灰度化

Answer 1

您可以一步完成，使用亮度作为混合模式。

在这种模式下，亮度取自前层（图像），色相和饱和度取自背景（这里是纯色）

以下演示还让您可以通过类分配滤色器

.test {
    width: 400px;
    height: 200px;    
    margin: 10px;
    background-size: cover;
    background-image:  url(http://placekitten.com/1000/750);
}

.test:hover {
    background-blend-mode: luminosity;
}

.red {
    background-color: red;
}

.green {
    background-color: greenyellow;
}

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

另一种解决方案，图像中的黑色提供完全饱和的颜色（而不是黑色）。设置起来有点复杂，但可以实现。

.test {
    width: 400px;
    height: 200px;    
    background-size: cover;
    background-color: white;
    background-image: linear-gradient(red, red), url(http://placekitten.com/1000/750);
    background-blend-mode: screen, luminosity;
}

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

一种将这种效果作为可重用类的方法。图像已经在元素上，我们只是设置了设置效果的类和一个单独的颜色类。

所以顺序需要是：

• 第一层 = 白色
• 第二层图像，混合设置为亮度。这样，图像的亮度与白色相结合，为高亮度提供白色，为低亮度提供黑色（即灰度滤镜）
• 第三层，纯色，混合设置为屏幕。这使白色保持白色，但将黑色变为颜色。

我们需要为最终混合使用伪元素，以便使用独立类轻松设置所有这些。这将设置为 mix-blend 而不是 background-blend ：

#cat {
    width: 760px;
    height: 560px;
    background-image: url(http://placekitten.com/1000/750); 
}

.test {
    background-color: white;
    background-position: 0px 0px;
    background-size: cover;
    background-blend-mode: luminosity;
    position: relative;
}

.test:after {
    content: "";
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    mix-blend-mode: screen;
    pointer-events: none;
}

.blue:after {
    background-color: blue;
}

<div class="test blue" id="cat"></div>