标签定义及使用说明

mix-blend-mode 属性描述了元素的内容应该与元素的直系父元素的内容和元素的背景如何混合。

语法

mix-blend-mod:

使用mix-blend-mode 各种混合模式实例

注意:  Internet Explorer 或 Edge 浏览器不支持 mix-blend-mode 属性。

（还是那个熟悉的小姑娘！嘿嘿！）通过下面的实例，我们可以看到，图片与不同颜色的背景色进行混合的效果是可以预期的，但图片本身的色彩丰富程度决定了最终输出的效果。

.normal {mix-blend-mode: normal;}
.multiply {mix-blend-mode: multiply;}
.screen {mix-blend-mode: screen;}
.overlay {mix-blend-mode: overlay;}
.darken {mix-blend-mode: darken;}
.lighten {mix-blend-mode: lighten;}
.color-dodge {mix-blend-mode: color-dodge;}
.color-burn {mix-blend-mode: color-burn;}
.difference {mix-blend-mode: difference;}
.exclusion {mix-blend-mode: exclusion;}
.hue {mix-blend-mode: hue;}
.saturation {mix-blend-mode: saturation;}
.color {mix-blend-mode: color;}
.luminosity {mix-blend-mode: luminosity;}

应用方法

/* 外容器div 是红色背景，图片里调用的 class 就是图片混合效果的类  */
<div class="red" >
    <img src="child.jpg" class="multiply" >
</div>

与红色混合的实例

与蓝色混合的实例

与黄色混合的实例

与绿色混合实例

其他混合实例

场景一：在复杂多彩的图片上，放置文字。利用 overlay模式，实现文字增强效果，实现文字与图像的和谐混合，提高阅读便利。

场景二：在一个元素上方叠加多个彩色透明图形，创造出一种抽象艺术的效果。使用mix-blend-mode的multiply模式可以实现这一目标。

场景二：在用户界面设计中，希望用户在鼠标悬浮到按钮上时有明显的视觉反馈。将mix-blend-mode与伪类:hover相结合，创建独特的交互效果。

<p class="text_wave">WAVE</p>

/* 案例3 的CSS样式表：用CSS的 mix-blend-mode 属性与伪类相结合制作漂亮的水波效果*/
.text_wave {
    width: 100%;
    position: relative;
    font-size: 160px;
    font-weight: bold;
    background: #fff;
    color: #000;
    overflow: hidden;
    
    &::before,
    &::after {
        content: "";
        position: absolute;
        top: -923px;
        left: 50%;
        width: 2000px;
        height: 2000px;
        border-radius: 45% 48% 43% 47%;
        transform: translate(-50%, -50%);
        background: rgba(3, 169, 244, .85);
        animation: rotate 10s infinite linear;
        z-index: 1;
        mix-blend-mode: lighten;
    }
    
    &::after {
        border-radius: 43% 47% 44% 48%;
        animation: rotate 10s infinite .5s linear;
    }
}

@keyframes rotate {
    0% {
        transform: translate(-50%, -50%) rotate(0);
    }
    100% {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

本文介绍完毕，希望您喜欢！嗯，收藏+点赞+评论！谢谢！