526互联

mix-blend-mode和background-blend-mode应用场景

发布时间 2023-06-19 20:07:07作者: 看风景就

mix-blend-mode 使多重叠元素的颜色发生混合，包括元素与元素，元素与图片

background-blend-mode 使得多个背景发生混合，包括背景图与背景图，背景图与背景色

isolation: isolate 可以创建层叠上下文，就可以阻断mix-blend-mode，使多个元素能分组进行混合，不干扰

常用场景

1. 图片后方的元素能透视出来，不被遮挡

可以用 mix-blend-mode: screen;

2. 文字反色效果

可以用 mix-blend-mode: difference;

.main {
    width: 600px;
    height: 200px;
    /* 45度渐变可以形成梯形的效果 */
    background: linear-gradient(45deg, #000 0, #000 50%, #fff 50%);
    position: relative;
    margin: 100px auto;
}
.main::before {
    content: '白雾茫茫丶';
    position: absolute;
    font-size: 50px;
    width: 100%;
    height: 100%;
    top: 40%;
    left: 20%;
    color: #fff;
    mix-blend-mode: difference;
    animation: move 3s infinite linear alternate;
}

@keyframes move {
    0% {
    transform: translateX(20%);
    }

    100% {
    transform: translateX(-20%);
    }
}

3. 文字镂空

上层文字，要透视后面的图片

可以用 mix-blend-mode: screen;

4. 文字背景

就是图片只显示文字的部分，与background-clip: text类似

可用 mix-blend-mode: lighten

黑色字体在上方，下面浅色的图片就会透视出来

5. 图标变色

图标可以变为渐变色或者纯色，使用黑色图标，lighten混合可以将浅的渐变色显示出来，加上position变化，还可以实现滑动的渐变色效果

.pic1 {
    background-image: url($img), linear-gradient(#f09, #09f, #f0f);
    background-blend-mode: lighten;
    background-size: cover;
    background-position: 0 0, 0 120px;
    background-repeat: no-repeat;
}

.pic1:hover {
    background-position: 0 0, 0 0;
}

或者

/* 变色的时候改变 --fill-color 的属性值 */
.element {
    --fill-color: gray;
    background: linear-gradient(var(--fill-color), var(--fill-color)), url(./icon.svg), #fff;
    /* 或者 lighten, normal; */
    background-blend-mode: screen, normal;
}

 

 

出处: https://juejin.cn/post/7208708762265059365
　　  https://www.cnblogs.com/coco1s/p/8124815.html
        https://www.zhangxinxu.com/wordpress/2022/01/css-background-image-color/