CSS background-blend-mode 属性-代码号

CSS background-blend-mode 属性详解：背景混合模式指南

概述

background-blend-mode 是 CSS3 中一个强大的属性，用于控制元素背景层（图像和颜色）之间的混合模式。通过这个属性，开发者可以创建出丰富多彩的视觉效果，实现背景图像之间或背景图像与背景颜色的复杂混合效果。

属性语法

selector {
  background-blend-mode: normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity;
}

混合模式分类详解

基础混合模式

normal（正常模式）

默认值，背景层按正常顺序堆叠，不应用任何混合效果。

.normal-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/1.jpg');
  background-color: #3498db;
  background-blend-mode: normal;
}

multiply（正片叠底）

产生变暗效果，类似于将两个图像重叠在灯箱上。

.multiply-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/2.jpg');
  background-color: #e74c3c;
  background-blend-mode: multiply;
}

screen（滤色）

产生变亮效果，与正片叠底相反。

.screen-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/3.jpg');
  background-color: #2ecc71;
  background-blend-mode: screen;
}

对比混合模式

overlay（叠加）

结合正片叠底和滤色模式，保留亮部和暗部细节。

.overlay-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/4.jpg');
  background-color: #f39c12;
  background-blend-mode: overlay;
}

darken（变暗）

选择两个背景层中较暗的颜色作为结果。

.darken-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/5.jpg');
  background-color: #9b59b6;
  background-blend-mode: darken;
}

lighten（变亮）

选择两个背景层中较亮的颜色作为结果。

.lighten-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/6.jpg');
  background-color: #1abc9c;
  background-blend-mode: lighten;
}

复杂混合模式

color-dodge（颜色减淡）

通过降低对比度来亮化底层图像。

.color-dodge-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/1.jpg');
  background-color: #e67e22;
  background-blend-mode: color-dodge;
}

color-burn（颜色加深）

通过增加对比度来暗化底层图像。

.color-burn-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/2.jpg');
  background-color: #34495e;
  background-blend-mode: color-burn;
}

特殊效果混合模式

difference（差值）

从亮色中减去暗色，产生反相效果。

.difference-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/3.jpg');
  background-color: #d35400;
  background-blend-mode: difference;
}

exclusion（排除）

类似差值模式，但对比度较低。

.exclusion-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/4.jpg');
  background-color: #8e44ad;
  background-blend-mode: exclusion;
}

颜色组件混合模式

hue（色相）

使用底层颜色的亮度和饱和度，与上层颜色的色相混合。

.hue-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/5.jpg');
  background-color: #27ae60;
  background-blend-mode: hue;
}

saturation（饱和度）

使用底层颜色的亮度和色相，与上层颜色的饱和度混合

.saturation-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/6.jpg');
  background-color: #c0392b;
  background-blend-mode: saturation;
}

color（颜色）

使用底层颜色的亮度，与上层颜色的色相和饱和度混合。

.color-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/1.jpg');
  background-color: #16a085;
  background-blend-mode: color;
}

luminosity（亮度）

使用底层颜色的色相和饱和度，与上层颜色的亮度混合。

.luminosity-mode {
  background-image: url('https://www.ebingou.cn/biancheng/images/2.jpg');
  background-color: #2980b9;
  background-blend-mode: 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>代码号编程 - 背景混合模式示例</title>
  <style>
    .blend-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
      padding: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }
    
    .blend-item {
      height: 200px;
      border-radius: 10px;
      background-image: url('https://www.ebingou.cn/biancheng/images/3.jpg');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-weight: bold;
      text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
    }
    
    .multiply { background-blend-mode: multiply; background-color: #e74c3c; }
    .screen { background-blend-mode: screen; background-color: #3498db; }
    .overlay { background-blend-mode: overlay; background-color: #f1c40f; }
    .difference { background-blend-mode: difference; background-color: #9b59b6; }
    .hue { background-blend-mode: hue; background-color: #2ecc71; }
    .color { background-blend-mode: color; background-color: #e67e22; }
  </style>
</head>
<body>
  <div class="blend-container">
    <div class="blend-item multiply">正片叠底模式</div>
    <div class="blend-item screen">滤色模式</div>
    <div class="blend-item overlay">叠加模式</div>
    <div class="blend-item difference">差值模式</div>
    <div class="blend-item hue">色相模式</div>
    <div class="blend-item color">颜色模式</div>
  </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>代码号编程学习 - 渐变混合效果</title>
  <style>
    .gradient-blend {
      width: 100%;
      height: 500px;
      background-image: 
        linear-gradient(45deg, rgba(231, 76, 60, 0.8), rgba(46, 204, 113, 0.8)),
        url('https://www.ebingou.cn/biancheng/images/4.jpg');
      background-size: cover;
      background-position: center;
      background-blend-mode: overlay;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-align: center;
    }
    
    .content {
      max-width: 600px;
      padding: 40px;
      background: rgba(0, 0, 0, 0.5);
      border-radius: 15px;
    }
    
    h1 {
      font-size: 2.5em;
      margin-bottom: 20px;
    }
    
    p {
      font-size: 1.2em;
      line-height: 1.6;
    }
  </style>
</head>
<body>
  <div class="gradient-blend">
    <div class="content">
      <h1>欢迎学习代码号编程</h1>
      <p>通过CSS背景混合模式，我们可以创建出令人惊叹的视觉效果，提升网页设计的表现力和用户体验。</p>
    </div>
  </div>
</body>
</html>

实际应用场景

创建视觉层次

通过混合模式为背景添加色彩叠加，创建深度感和视觉层次。

图像色彩调整

使用混合模式快速调整图像色调，无需图像编辑软件。

创建特殊效果

实现各种艺术效果，如复古、胶片、双色调等风格。

响应式设计增强

为不同设备状态提供视觉反馈，增强交互体验。

本节课程知识要点

混合模式原理：理解各种混合模式的数学计算原理和视觉效果
多背景层控制：掌握多个背景图像和颜色之间的混合技巧
性能考虑：注意混合模式对页面渲染性能的影响
浏览器兼容性：了解不同浏览器对混合模式的支持情况
实用场景：掌握混合模式在实际项目中的应用场景

注意事项

浏览器支持：虽然现代浏览器普遍支持，但需要测试目标用户的浏览器兼容性
性能优化：复杂的混合模式可能影响页面性能，特别是在移动设备上
可访问性：确保混合后的背景仍然保持良好的可读性和可用性
渐进增强：为不支持混合模式的浏览器提供降级方案

本文标签：

CSS background-blend-mode 属性