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>

在使用背景混合模式保持颜色

1 个答案: