CSS3 background-blend-mode的使用

最新推荐文章于 2025-05-10 13:11:41 发布

想要飞翔的小猪

最新推荐文章于 2025-05-10 13:11:41 发布

阅读量2.7k

点赞数 6

CC 4.0 BY-SA版权

分类专栏： js基本知识 css3 文章标签： background-blend-mode 背景颜色叠加使用图片特效

本文链接：https://blog.youkuaiyun.com/dwb123456123456/article/details/84563367

js基本知识同时被 2 个专栏收录

32 篇文章

订阅专栏

css3

20 篇文章

订阅专栏

本文介绍了CSS中的background-blend-mode属性，展示了如何通过不同混合模式叠加背景图片和背景色，包括正片叠底、滤色、叠加等效果，并提供了实例代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

除了 mix-blend-mode ，CSS 还提供一个 background-blend-mode 。也就是背景的混合模式。

可以是背景图片与背景图片的混合，

也可以是背景图片和背景色的之间的混合。

background-blend-mode 的可用取值与 mix-blend-mode一样，不重复介绍，下面直接进入应用阶段。

案例一：

对于 background-blend-mode ，最简单的应用就是将两个或者多个图片利用混合模式叠加在一起。假设我们存在下述两张图片，可以利用背景混合模式 background-blend-mode 叠加在一起；

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>background-blend-mode</title>
</head>
<style>
    body {
        width: 100%;
        background-color: #fff;
        margin: 0 auto;
    }

    .container {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 100px auto;
    }

    .container>div {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        mix-blend-mode: normal;
    }

    .title {
        color: #333;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
    }

    .contain {
        width: 400px;
        height: 500px;
        margin: 20px auto;
        background: url('renwu.jpg'),
        url('bg.jpg');
        background-size: cover;
        background-blend-mode: lighten;
    }
</style>

<body>
    <h1 class="title">Background-Blend-Mode:
        <select id="select">
            <option value="normal">normal -- 正常</option>
            <option value="multiply">multiply -- 正片叠底</option>
            <option value="screen">screen -- 滤色</option>
            <option value="overlay">overlay -- 叠加</option>
            <option value="darken">darken -- 变暗</option>
            <option value="lighten">lighten -- 变亮</option>
            <option value="color-dodge">color-dodge -- 颜色减淡</option>
            <option value="color-burn">color-burn -- 颜色加深</option>
            <option value="hard-light">hard-light -- 强光</option>
            <option value="soft-light">soft-light -- 柔光</option>
            <option value="difference">difference -- 差值</option>
            <option value="exclusion">exclusion -- 排除</option>
            <option value="hue">hue -- 色相</option>
            <option value="saturation">saturation -- 饱和度</option>
            <option value="color">color -- 颜色</option>
            <option value="luminosity">luminosity -- 亮度</option>
        </select>
    </h1>
    <div class="contain" id="contain">

    </div>
    <script>
        let select = document.getElementById('select');
        let contain = document.getElementById("contain");
        let value;
        select.addEventListener('click', changeEvent);
        function changeEvent() {
            value = select.value;
            contain.style.cssText = 'background-blend-mode:' + value
        };
    </script>
</body>

</html>

案例二：

这里使用了背景色渐变动画，这里使用的是位移 background-position

实现上述效果使用的 background-blend-mode 不限制具体某一种混合模式，可以自己多尝试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body {
        width: 100%;
        background-color: #fff;
        margin: 0 auto;
    }

    .container {
        position: relative;
        width: 150px;
        height: 150px;
        margin: 100px auto;
    }

    .container>div {
        position: absolute;
        top: 0;
        left: 0;
        width: 150px;
        height: 150px;
        border-radius: 50%;
        mix-blend-mode: normal;
    }

    .title {
        color: #333;
        font-size: 24px;
        line-height: 32px;
        text-align: center;
    }

    .pic_box {
        width: 760px;
        text-align: center;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        margin: 100px auto;
    }

    .pic {
        width: 300px;
        height: 200px;
        margin: 30px;
        background: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(#f00, #00f);
        background-size: cover, 100% 100%;
        background-position: 0 0, -300px 0;
        background-blend-mode: luminosity;
        background-repeat: no-repeat;
        transition: .5s background-position;
        cursor: pointer;
    }

    .pic1 {
        background-image: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(90deg, #ff5722, #03a9f4);
    }

    .pic2 {
        background-image: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(-180deg, #00bcd4, #fa1a09);
    }

    .pic3 {
        background-image: url('https://user-images.githubusercontent.com/8554143/34238564-52f2ceb6-e63d-11e7-9812-dd987f98e9da.png'),
        linear-gradient(45deg, #ffc107, #3f51b5, #4caf50, #ff0057, #fae105, #5c00ff);
    }

    .pic:hover {
        background-position: 0 0, 0 0;
    }
</style>

<body>
    <h1 class="title">Background-Blend-Mode:
        <select id="select">
            <option value="normal">normal -- 正常</option>
            <option value="multiply">multiply -- 正片叠底</option>
            <option value="screen">screen -- 滤色</option>
            <option value="overlay">overlay -- 叠加</option>
            <option value="darken">darken -- 变暗</option>
            <option value="lighten">lighten -- 变亮</option>
            <option value="color-dodge">color-dodge -- 颜色减淡</option>
            <option value="color-burn">color-burn -- 颜色加深</option>
            <option value="hard-light">hard-light -- 强光</option>
            <option value="soft-light">soft-light -- 柔光</option>
            <option value="difference">difference -- 差值</option>
            <option value="exclusion">exclusion -- 排除</option>
            <option value="hue">hue -- 色相</option>
            <option value="saturation">saturation -- 饱和度</option>
            <option value="color">color -- 颜色</option>
            <option value="luminosity">luminosity -- 亮度</option>
        </select>
    </h1>
    <div class="pic_box">
        <div class="pic"></div>
        <div class="pic pic1"></div>
        <div class="pic pic2"></div>
        <div class="pic pic3"></div>
    </div>
   
    <script>

        let select = document.getElementById('select');
        let mode = document.getElementsByClassName("pic");
        let value;
        select.addEventListener('click', changeEvent);
        function changeEvent() {
            value = select.value;
            for (let item of mode) {
                item.style.cssText = 'background-blend-mode:' + value
            }
        };
    </script>
</body>

</html>

最后注意，background-blend-mode兼容性也不好，跟mix-blend-mode兼容性差不多，具体的兼容性可以自己去网上看看