CSS3混合模式mix-blend-mode/background-blend-mode简介

mix-blend-mode

CSS3混合模式是在CSS2的基础上增加的新特性，用于控制在两个图层重叠时如何混合它们的颜色值。mix-blend-mode属性控制元素的内容与其父元素的背景混合模式，它指定元素内容的混合方式，即将前景层和背景层的颜色进行混合。

混合模式的模式类型

混合模式支持多种类型，常用的包括：

• normal 混合模式保持不变，前景和背景颜色不混合
• multiply 以乘法方式混合两个图层的颜色值，产生比原色暗的颜色，常用于阴影和深色背景
• screen 以屏幕方式混合两个图层的颜色值，产生比原色亮的颜色，常用于滤镜效果
• overlay 根据背景色调整前景层的颜色，产生高光和阴影效果，常用于透明度的调整
• soft-light 根据前景层和背景层的颜色信息，调整背景层的颜色，产生柔和的效果，常用于柔化和润色效果。
• hard-light 根据前景层和背景层的颜色信息，调整背景层的颜色，产生较为硬朗的效果，常用于边缘和线条
• difference 将两个图层的颜色进行比较，产生反差的颜色效果。
• exclusion 只有当两个图层的颜色完全相同时，才能产生透明的效果。

混合模式的使用语法

.mix-class{
    mix-blend-mode: normal;
}

混合模式的实际应用

下面是一个利用mix-blend-mode属性和::before内容块实现的柔和的“云雾”效果。代码中，mix-blend-mode: screen;将背景色进行了屏幕混合，达到了柔和的“云雾”效果。

.background {
    width: 100%;
    height: 100vh;
    position: relative;
    background: #999;
}
.background::before {
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    background: #fff;
    mix-blend-mode: screen;
    opacity: 0.5;
    border-radius: 9999px;
    top: -5%;
    left: -10%;
}

background-blend-mode

background-blend-mode用于控制背景图片的混合模式。如果背景图片不是单一的颜色而是由多张图片合成的，则可以利用background-blend-mode实现各种效果。该属性可以为添加的背景图层指定混合模式，从而实现更丰富的视觉效果。

混合模式的模式类型

与mix-blend-mode相似，background-blend-mode也支持多种混合模式类型。

混合模式的使用语法

.background-class{
    background: url(xxx.png), url(xxx.png), ...;
    background-blend-mode: normal;
}

混合模式的实际应用

下面是一个利用background-blend-mode属性实现的百叶窗效果。代码中，背景图片由两张图组成，分别为assets/win-1.jpg和assets/win-2.jpg，根据不同的混合模式设置，形成了百叶窗效果。

.background {
    height: 100vh;
    background: url(assets/win-1.jpg), url(assets/win-2.jpg);
    background-repeat: no-repeat, no-repeat;
    background-blend-mode: exclusion, multiply;
    background-size: auto 100%, auto 100%;
}

以上就是CSS3混合模式mix-blend-mode和background-blend-mode的简介以及它们的实际应用。