背景混合-CSDN博客

本文链接：https://blog.csdn.net/wj___csdn/article/details/129458565

利用 css

background-blend-mode: lighten;

mix-blend-mode: darken;

可以实现故障风格图

<style>
.wrap{
    background: url(../img/狂飙.jpg) #0ff;
    width: 500px;
    height: 300px;
    background-size: cover;
    position: relative;
    /* 背景颜色混合 */
    background-blend-mode:lighten;
}
.wrap::after{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: url(../img/狂飙.jpg) #f00;
    background-size: cover;
    background-blend-mode: lighten;
    mix-blend-mode: darken;
    margin-left: 10x;
    animation:change 30ms infinite;
    }
</style>

背景图融合效果

mix-blend-mode: multiply;

filter: contrast(3);

<style>
 .item{
        width: 500px;
        height: 400px;
        background: url(../img/u=1354561375\,356283839&fm=253&fmt=auto&app=138&f=JPEG.webp);
        background-size:contain;
        position: relative;
    }
    .min{
          width: 100px;
          height: 100px;
          background: url(../img/kunkun.gif);
          position: absolute;
          left: 50%;
          top: 32%;
          transform: translate(-50%,-50%);
          mix-blend-mode: multiply;
          filter: contrast(3);

    }
</style>
<body>
  <div class="item">
        <div class="min"></div>
    </div>
</body>

还可以实现这样的效果

<style>
 .box{
        font-size: 14px;
        width: 280px;
        height: 300px;
        background: url(../img/kunkun.gif) #000;
        background-size: contain;
        overflow: hidden;
        background-clip: text;
        -webkit-background-clip: text;
        color: transparent;
        background-blend-mode: lighten;
        mix-blend-mode: hard-light;
        filter: grayscale(1);

    }
</style>
<body>
    <div class="item">
        <div class="min"></div>
    </div>
</body>

各种混合模式实例：

.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;}

参考https://www.runoob.com/cssref/pr-mix-blend-mode-html.html