CSS3 背景 - background-blend-mode 属性

核心知识点

background-blend-mode 属性的基本语法和作用
不同类型的取值方式（混合模式）
与 background 属性的配合使用
浏览器兼容性和最佳实践

学习目标

掌握 background-blend-mode 属性的完整语法
能够使用不同的混合模式创建背景效果
理解各种混合模式的效果和应用场景
学会创建各种复杂的背景混合效果
了解背景混合模式的常见应用场景和解决方案

什么是 background-blend-mode 属性？

background-blend-mode 属性用于设置元素背景图像与背景颜色之间，以及多个背景图像之间的混合模式。

语法

background-blend-mode: [混合模式];

取值方式

混合模式	描述
`normal`	默认值，正常混合模式
`multiply`	正片叠底模式
`screen`	滤色模式
`overlay`	叠加模式
`darken`	变暗模式
`lighten`	变亮模式
`color-dodge`	颜色减淡模式
`color-burn`	颜色加深模式
`hard-light`	强光模式
`soft-light`	柔光模式
`difference`	差值模式
`exclusion`	排除模式
`hue`	色相模式
`saturation`	饱和度模式
`color`	颜色模式
`luminosity`	亮度模式

混合模式效果

1. 基本混合模式

normal：默认模式，背景图像和颜色不混合
multiply：背景颜色与背景图像相乘，结果颜色更暗
screen：背景颜色与背景图像相加，结果颜色更亮
overlay：结合了 multiply 和 screen 模式的效果

2. 比较混合模式

darken：保留较暗的颜色
lighten：保留较亮的颜色
difference：计算颜色差值
exclusion：类似于 difference，但效果更柔和

3. 颜色混合模式

hue：使用背景图像的色相，保留背景颜色的饱和度和亮度
saturation：使用背景图像的饱和度，保留背景颜色的色相和亮度
color：使用背景图像的色相和饱和度，保留背景颜色的亮度
luminosity：使用背景图像的亮度，保留背景颜色的色相和饱和度

代码示例

示例 1：基本用法

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-blend-mode 基本用法示例</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
            background-image: url('https://via.placeholder.com/300x300');
            background-color: #ff0000;
            background-size: cover;
            background-position: center;
        }
        
        .blend-normal {
            background-blend-mode: normal;
        }
        
        .blend-multiply {
            background-blend-mode: multiply;
        }
        
        .blend-screen {
            background-blend-mode: screen;
        }
        
        .blend-overlay {
            background-blend-mode: overlay;
        }
    </style>
</head>
<body>
    <h1>background-blend-mode 基本用法示例</h1>
    
    <div class="box blend-normal">
        <h2>normal (默认)</h2>
        <p>background-blend-mode: normal;</p>
    </div>
    
    <div class="box blend-multiply">
        <h2>multiply</h2>
        <p>background-blend-mode: multiply;</p>
    </div>
    
    <div class="box blend-screen">
        <h2>screen</h2>
        <p>background-blend-mode: screen;</p>
    </div>
    
    <div class="box blend-overlay">
        <h2>overlay</h2>
        <p>background-blend-mode: overlay;</p>
    </div>
</body>
</html>

示例 2：多混合模式

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-blend-mode 多混合模式示例</title>
    <style>
        .box {
            width: 300px;
            height: 300px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
            background-image: url('https://via.placeholder.com/300x300');
            background-color: #ff0000;
            background-size: cover;
            background-position: center;
        }
        
        .blend-darken {
            background-blend-mode: darken;
        }
        
        .blend-lighten {
            background-blend-mode: lighten;
        }
        
        .blend-difference {
            background-blend-mode: difference;
        }
        
        .blend-exclusion {
            background-blend-mode: exclusion;
        }
    </style>
</head>
<body>
    <h1>background-blend-mode 多混合模式示例</h1>
    
    <div class="box blend-darken">
        <h2>darken</h2>
        <p>background-blend-mode: darken;</p>
    </div>
    
    <div class="box blend-lighten">
        <h2>lighten</h2>
        <p>background-blend-mode: lighten;</p>
    </div>
    
    <div class="box blend-difference">
        <h2>difference</h2>
        <p>background-blend-mode: difference;</p>
    </div>
    
    <div class="box blend-exclusion">
        <h2>exclusion</h2>
        <p>background-blend-mode: exclusion;</p>
    </div>
</body>
</html>

示例 3：多背景混合

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>background-blend-mode 多背景混合示例</title>
    <style>
        .box {
            width: 400px;
            height: 400px;
            border: 2px solid #333;
            margin: 20px;
            padding: 20px;
            /* 多个背景图像 */
            background-image: 
                url('https://via.placeholder.com/200x200/ff0000/ffffff'),
                url('https://via.placeholder.com/200x200/00ff00/ffffff'),
                url('https://via.placeholder.com/200x200/0000ff/ffffff');
            background-size: 200px 200px;
            background-position: 
                top left,
                top right,
                bottom left;
            background-repeat: no-repeat;
            /* 为每个背景指定不同的混合模式 */
            background-blend-mode: multiply, screen, overlay;
        }
    </style>
</head>
<body>
    <h1>background-blend-mode 多背景混合示例</h1>
    
    <div class="box">
        <h2>多背景混合</h2>
        <p>使用多个背景图像并为每个图像指定不同的混合模式</p>
    </div>
</body>
</html>

常见应用场景

1. 图像叠加效果

.overlay {
    background-image: url('image.jpg');
    background-color: rgba(0, 0, 0, 0.5);
    background-blend-mode: multiply;
    background-size: cover;
    background-position: center;
}

2. 色彩调整

.color-adjust {
    background-image: url('photo.jpg');
    background-color: #ff9900;
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
}

3. 纹理叠加

.texture-overlay {
    background-image: url('texture.png'), url('background.jpg');
    background-blend-mode: multiply, normal;
    background-size: auto, cover;
    background-position: center, center;
    background-repeat: repeat, no-repeat;
}

4. 创意背景效果

.creative-bg {
    background-image: 
        radial-gradient(circle at center, #ff0000 0%, transparent 70%),
        url('background.jpg');
    background-blend-mode: overlay;
    background-size: cover;
    background-position: center;
}

浏览器兼容性

浏览器	支持情况
Chrome	✅
Firefox	✅
Safari	✅
Edge	✅
IE	❌

最佳实践

使用 rgba 颜色：与半透明颜色配合使用可以创建更自然的混合效果
多背景混合：为多个背景图像指定不同的混合模式可以创建复杂的效果
性能考虑：复杂的混合模式可能会影响性能，尤其是在移动设备上
测试不同模式：不同的混合模式会产生不同的效果，建议多测试找到最适合的模式
** fallback 方案**：为不支持的浏览器提供替代方案

练习

创建一个带有深色叠加层的英雄区域
实现一个使用混合模式的图片卡片效果
设计一个使用多个背景图像和混合模式的创意背景
尝试使用不同的混合模式调整图片的色彩效果
创建一个带有纹理叠加的按钮效果

小结

background-blend-mode 属性是创建复杂背景效果的强大工具，通过灵活使用不同的混合模式，你可以实现各种视觉效果，如叠加层、色彩调整和纹理效果等。结合其他背景属性如 background-image、background-color 和多背景设置，你可以创建出更加丰富的视觉效果。

记住，在实际应用中，混合模式的效果会受到背景图像和背景颜色的影响，需要根据具体情况进行调整。同时，要注意浏览器兼容性，为不支持的浏览器提供替代方案。