当前内容所在位置（可进入专栏查看其他译好的章节内容）
文章目录
《CSS in Depth》新版封面
译者按
本篇就 CSS 混合模式洋洋洒洒介绍了四节内容，但要真正达到熟练应用的地步，还需要大量的实践与自我摸索，文章只是提纲挈领地带大家过了一遍主要的知识点，以便今后快速定位问题。CSS 就是这样一门入门容易精通难的语言。除了文中提到的在线工具资源外，大家还可以结合剪映 APP 中的混合模式（位于画中画特效）来巩固所学。只要留心周围的应用场景、再配合目标明确的刻意练习，理论上就没有学不会的新知识。
13.3 混合模式 Blend modes
大部分情况下，无论是使用真正的图片还是设置渐变，元素一般只会使用一张背景图片。但某些情况下可能需要用到两张或者更多背景图片，CSS 也提供了相应支持。
背景图片属性（property）可以接受任意数量的属性值，每个值之间用逗号分隔即可。例如：
css">background-image: url(bear.jpg), linear-gradient(to bottom, #57b, #148);
使用多个背景图片时，列表中排在前面的图片会渲染到排序靠后的图片之上。在本例中，图片 bear.jpg 将遮住线性渐变。此时除非图片恰巧时半透明的，否则渐变效果是不可见的。此外还可以定义多个渐变背景，只要罗列出的第一个渐变特效包含透明或半透明的颜色，这些渐变就能相应地叠加到一起。
然而，有时可能需要对两个完全不透明的背景进行叠加，此时就可以利用 混合模式（blend mode） 来加以解决。
如果熟悉图片编辑软件，那您可能见过混合模式的效果。混合模式用来控制叠放的图片怎样融合到一起。有些模式命名令人费解（enigmatic），比如滤色（screen）、颜色加深（color-burn）、强光（hard-light）等等。混合模式的典型案例如图 13.16 所示。它是由两张背景图片通过 正片叠底（multiply） 的混合模式组合而成的。两个背景都使用了同一张图片，但是背景的位置不同。
混合模式组合在一起" />
【图 13.16 两张背景图片以正片叠底（multiply）的混合模式组合在一起】
最终呈现的效果很有意思，两张图片的副本虽然叠放在了一起，但彼此仍清晰可见。而且混合模式不会像普通的透明度设置那样，冲淡或者削弱背景整体的颜色。
下面我们来创建一个包含两个背景图片的元素，并将其混合成如图 13.16 所示的效果。新建一个页面，并添加一个类名为 blend 的 div 元素。后续的几个示例还会反复用到该元素。
<div class="blend"></div>
不妨就用一个空元素来实现想要的效果。根据代码清单 13.14 提供的示例代码同步更新本地样式表，并关联到示例页面。
代码清单 13.14 混合两张背景图片
css">.blend {min-height: 70vmin;background-image: url(images/bear.jpg), url(images/bear.jpg); /* 两个背景图用逗号隔开 */background-size: cover; /* 同一属性值对两张背景图同时生效 */background-repeat: no-repeat; /* 同一属性值对两张背景图同时生效 */background-position: -30vw, 30vw; /* 给每张背景图片设置不同的初始位置 */background-blend-mode: multiply; /* 指定混合模式 */
}
大部分与背景相关的属性都可以接受多个值，彼此间用逗号分隔即可。例如本例中的 background-position 就用到了两个值，第一个值对第一张背景图片生效，第二个值则用于控制第二张背景图片的位置。同理，background-size 和 background-repeat 也支持多个属性值，但如果只设置一个值，则表示对所有的背景图片均有效。本例还指定了属性 min-height 的值，旨在确保元素高度不会为 0（因为是空元素）。
此外，background-size 属性还接受两个特殊的关键字：cover 和 contain。值为 cover 时浏览器会调整背景图片的大小，使其填满整个元素，但也可能因此导致图片边缘被裁掉一部分；而值为 contain 时则可以确保整个背景图可见，尽管元素的某些区域可能不会被背景图覆盖（即 “黑边（letterboxing 1）” 效果）。该属性也可以接受长度值，用于直接设置背景图片的宽高。
尝试修改混合模式的其他属性值，例如 color-burn 或者 difference，看看它们都有那些不同的效果。这很有趣，但您可能会疑惑这些混合模式有哪些实际应用。这里列举了一些实际应用场景：
- 利用某纯色或渐变来为图片着色；
- 为图片添加纹理效果，比如划痕或者老胶片放映时的颗粒感等；
- 缓和、加深或者减小图片的对比度，使图片上的文字更易于阅读；
- 在图片上覆盖一条文字横幅，但是还想让图片完整显示。
下面我们先来看看这些应用场景的实例，之后再通过一个明细列表简要介绍当前可用的所有混合模式。
13.3.1 为图片上色 Tinting an image
通过使用混合模式，我们可以把一张全彩图片着色成单一色调的图片。下面以棕熊照片为例，演示将其着色为蓝色的具体方法，最终效果如图 13.17 所示。
【图 13.17 使用单一蓝色色调着色的照片】
属性 background-blend-mode 不仅合并了多个背景图片，同时还合并了 background-color。所有这些叠放的图层，最后都会被混合模式拼合在一起。因此可以把背景色设置为想要的色调并将其混合到图片中。为此，请根据代码清单 13.15 同步更新本地样式表。
代码清单 13.15 将背景颜色的色调混合到背景图片上
css">.blend {min-height: 70vmin;background-image: url("images/bear.jpg");background-color: #148; /* 蓝色背景 */background-size: cover;background-repeat: no-repeat;background-position: center;background-blend-mode: luminosity; /* 使用明度混合模式 */
}
明度混合模式将前景图层（即棕熊图片）的明度（luminosity），与背景图层（即蓝色背景层）的色调与饱和度混合。换句话说，混合后的最终结果是完全使用背景色图层的颜色，但是亮度和对比度均来自棕熊图片。
这里的关键在于，明度混合模式（以及其他几种类似的混合模式）最终的渲染效果，取决于哪个图层在其他图层之上——这一点至关重要。在本例中，背景色图层位于最底层，其他图片则叠放在背景色图层之上。
再比如，假设将蓝色图层放在棕熊图片的上面而非下面（使用渐变色来代替背景颜色），最终的渲染效果就会不同。此时为了达到同样的效果，就必须改为颜色混合模式 color —— 颜色混合模式与明度混合模式恰好相反，它获取的是前景图层中的色调和饱和度、并混合背景图层的明度来生成最终的渲染效果。
13.3.2 混合模式的类型 Types of blend modes
CSS 目前支持 15 中混合模式。每种模式使用不同的数学公式来控制图片的混合效果。对于每个像素而言，就是取一个图层上的像素颜色，与其他图层上对应像素的颜色拼合计算，生成一个新的像素颜色，最终生成一张混合图片。
所有的混合模式如表 13.1 所示。这些混合模式又可以划分为五个大类：变暗（darkening）、变亮（lightening）、对比（contrasting）、复合（compositing）与比较（comparing）。
表 13.1 混合模式可分为以下五个大类
| 效果分类 | 混合模式的取值 | 描述 |
|---|---|---|
| 变暗 | multiply | 前景颜色越亮，背景色显示出来的越多 |
darken | 选择两种颜色中较暗的那个 | |
color-burn | 加深背景色，增加对比度 | |
| 变亮 | screen | 前景色越暗，背景色显示出来的越多 |
lighten | 选择两种颜色中较亮的那个 | |
color-dodge | 加亮背景色，降低对比度 | |
| 对比 | overlay | 对暗色使用 multiply、亮色使用 screen 来增加对比度，对比效果较柔和 |
hard-light | 大幅增加对比度。与 overlay 类似，但使用强化版 multiply 或 screen，对比效果明显 | |
soft-light | 与 hard-light 类似，但使用 burn / dodge 来代替 multiply / screen | |
| 复合 | hue | 将顶层颜色的 色调 混合到底层颜色中 |
saturation | 将顶层颜色的 饱和度 混合到底层颜色中 | |
luminosity | 将顶层颜色的 亮度 混合到底层颜色中 | |
color | 将顶层颜色的 色调 和 饱和度 混合到底层颜色中 | |
| 比较 | difference | 从亮色中减去暗色 |
exclusion | 类似 difference，但对比度稍弱 |
有的模式在实际应用中可能更有用一点，需要反复试验才能选出最合适的混合模式。您可以在 https://garden.bradwoods.io/notes/css/blend-modes 以交互式的方式预览其中的大部分混合模式效果。
13.3.3 图片纹理的添加 Adding texture to an image
混合模式的另一个应用场景，是为图片添加纹理效果。比如有一张清晰的图片，但有时处于样式考虑，您像让图片与众不同。这时就可以混合第二张图片，实现手动添加胶片噪点或其他纹理效果。
仔细观察图 13.18 所示的图片。这时之前演示过的棕熊图片，但是混合一张纹理图片后，就渲染出了类似粗制帆布（rough-hewn canvas）的效果。实现该效果有如下三种混合模式可供选择：overlay、hard-light 以及 soft-light。在本例中，我们不希望更改图片的色调，因此用的是一张灰度图片（grayscale image）来提供纹理，这样就保留了原始颜色。
【图 13.18 混合了纹理的图片效果】
实现纹理叠加效果的样式代码如代码清单 13.16 所示。纹理图片以重复平铺（tiled）的方式叠加在棕熊图片的上方。试根据下列代码同步更新样式表，并在浏览器中查看最终的渲染效果。
代码清单 13.16 使用混合模式 soft-light 为图片添加纹理
css">.blend {min-height: 70vmin;background-image: url("images/scratches.png"), url("images/bear.jpg"); /* 让纹理图片覆盖在主图上 */background-size: 200px, cover; /* 每 200px 平铺一张纹理图片 */background-repeat: repeat, no-repeat; /* 每 200px 平铺一张纹理图片 */background-position: center;background-blend-mode: soft-light; /* 使用柔光混合模式 */
}
纹理图片（如图 13.19 所示）的背景大小设为 200px，同时启用重复背景。这样就可以让纹理图片平铺填满整个元素。同时，第二张图片的背景大小设为 cover，且不启用重复，因此该图片不会平铺。
【图 13.19 灰度模式的帆布纹理图片】
我发现混合模式 soft-light 对于暗色系的纹理图片效果很好，而 hard-light 和 overlay 模式则更适用于亮色的纹理图片（倘若纹理图片放在了主图下方，情况则恰好相反）。然而在实际应用中，效果可能千差万别，这取决于您具体的设计需求以及基础图片的明暗程度。
13.3.4 融合混合模式的用法 Mix blend modes
尽管 background-blend-mode 属性可以实现多张图片的混合，但它仅限于混合一个元素的背景色或图片。CSS 还有一个属性 mix-blend-mode 可以实现多个元素间的混合。这样一来不仅可以混合图片，还可以把元素的文本和边框与容器的背景图片混合在一起。使用融合混合模式（mix blend mode），可以将标题渲染到图片上方，但遮住的图片部分依旧可以显示出来，如图 13.20 所示。
【图 13.20 混合标题及其下方图片后的最终效果图】
融合后的最终效果很有意思，文字看上去是透明的，就像红色横幅被剪掉了一部分似的。这里利用了 hard-light 混合模式以及中灰色文字颜色。对比混合模式（contrast blend modes）通常在使用很亮或很暗的颜色时才会有更明显的效果，这里的文字采用了中灰色（#808080），背景图层显示出来后没有太大变化。
想在浏览器中看到这样的效果，需要将标题作为示例容器的子元素添加到 HTML 页面。将以下 HTML 标记同步更新到示例页：
<div class="blend"><h1>Ursa Major</h1>
</div>
给 <h1> 元素添加样式，最终渲染为一个红色的带纯色背景的横幅，且具有亮灰色的上下粗线条边框，文字颜色为灰色。接着应用融合混合模式，将整个元素视为一个图层，并与下面容器中的背景图片混合在一起。试根据代码清单 11.17 同步更新本地样式表，并查看页面效果。
代码清单 13.17 使用融合混合模式将多个元素混合到一起
css">.blend {background-image: url("images/bear.jpg");background-size: cover;background-position: center;padding: 50vmin 0 1em;
}.blend > h1 {margin: 0;font-family: Helvetica, Arial, sans-serif;font-size: 6rem;text-align: center;mix-blend-mode: hard-light; /* 使用强光混合模式 */background-color: oklch(25% 0.2 25deg); /* 背景色为深红色 */color: #808080; /* 中灰色的文字颜色将变为透明 */border: 0.1em solid #ccc;border-width: 0.1em 0;
}
采用上述效果时，页面往往很难达到足够的对比度来让文字清晰可辨，因此在使用时需要特别当心。本例已采用大字号的粗字体来改善页面可读性。这样一来，在对比度较低的深色背景中，渲染效果也会相对更好一些。
混合模式在设计中有很多有趣的用法。将混合模式与渐变、阴影效果相结合，可以给页面带来很多有意思的视觉特效。但也请务必合理、审慎地利用好这些特效，当心过犹不及。
13.4 本章小结 Summary
- 颜色渐变可视为在元素上定义的背景图片。渐变可分为线性渐变、径向渐变和锥形渐变三类。
- 指定渐变的色彩空间可以有效控制渐变过程中的颜色插值方式。
- 将渐变与阴影相结合，可以增强页面元素的立体感。即便采用扁平化设计也能从细微的阴影或渐变效果中汲取灵感。
- 将渐变中的颜色节点（color stops）设置到同一位置可以实现“条纹”状效果。
- CSS 混合模式能够合并两个及以上背景样式。利用混合模式还能为图片上色、添加纹理效果。
译注
下一篇将进入第二版全新增补的章节——《Masks, shapes, and clipping》（蒙版、形状与剪切），也是 CSS 众多新增特性中个人感觉灵活性很强的一个话题。敬请期待！
关于《CSS in Depth》（中译本书名《深入解析 CSS》）
| 第 1 版 | 第 2 版 | |
|---|---|---|
| 读者评分 | 原版：4.7（亚马逊）；中文版：9.3（豆瓣） | 原版：5.0（亚马逊）；中文版：暂无，待出版 |
| 出版时间 | 原版：2018 年 3 月；中文版：2020 年 4 月 | 原版：2024 年 7 月；中文版：暂无，待出版 |
| 原价 | 原版：$44.99；中文版：￥139.00 | 原版：$59.99；中文版：暂无，待出版 |
| 现价 | 原版：$36.49；中文版：￥52.54 起步 | 原版：$52.09；中文版：暂无，待出版 |
| 原版国内预订 | 起步价 ￥461.00 | 起步价 ￥750.00 |
本专栏为该书第 2 版高分译文专栏，全网首发，精译精校，持续更新，计划今年内完成全书翻译，敬请期待！！！
目前已完结的章节（可进入本专栏查看详情，连载期间完全免费）：
- 第一章 层叠、优先级与继承（已完结）
- 1.1 层叠
- 1.2 继承
- 1.3 特殊值
- 1.4 简写属性
- 1.5 CSS 渐进式增强技术
- 1.6 本章小结
- 第二章 相对单位（已完结）
- 2.1 相对单位的威力
- 2.2 em 与 rem
- 2.3 告别像素思维
- 2.4 视口的相对单位
- 2.5 无单位的数值与行高
- 2.6 自定义属性
- 2.7 本章小结
- 第三章 文档流与盒模型（已完结）
- 3.1 常规文档流
- 3.2 盒模型
- 3.3 元素的高度
- 3.4 负的外边距
- 3.5 外边距折叠
- 3.6 容器内的元素间距问题
- 3.7 本章小结
- 第四章 Flexbox 布局（已完结）
- 4.1 Flexbox 布局原理
- 4.2 弹性子元素的大小
- 4.3 弹性布局的方向
- 4.4 对齐、间距等细节处
- 4.5 本章小结
- 第五章 网格布局（已完结）
- 5.1 构建基础网格
- 5.2 网格结构剖析 （上）
- 5.2.1 网格线的编号（下）
- 5.2.2 网格与 Flexbox 配合（下）
- 5.3 两种替代语法
- 5.3.1 命名网格线
- 5.3.2 命名网格区域
- 5.4 显式网格与隐式网格（上）
- 5.4.1 添加变化 （中）
- 5.4.2 让网格元素填满网格轨道（下）
- 5.5 子网格（全新增补内容）
- 5.6 对齐相关的属性
- 5.7 本章小结
- 第六章 定位与堆叠上下文（已完结）
- 6.1 固定定位
- 6.1.1 创建一个固定定位的模态对话框
- 6.1.2 在模态对话框打开时防止屏幕滚动
- 6.1.3 控制定位元素的大小
- 6.2 绝对定位
- 6.2.1 关闭按钮的绝对定位
- 6.2.2 伪元素的定位问题
- 6.3 相对定位
- 6.3.1 创建下拉菜单（上）
- 6.3.2 创建 CSS 三角形（下）
- 6.4 堆叠上下文与 z-index
- 6.4.1 理解渲染过程与堆叠顺序（上）
- 6.4.2 用 z-index 控制堆叠顺序（上）
- 6.4.3 深入理解堆叠上下文（下）
- 6.5 粘性定位
- 6.6 本章小结
- 第七章 响应式设计（已完结）
- 7.1 移动端优先设计原则（上篇）
- 7.1.1 创建移动端菜单（下篇）
- 7.1.2 给视口添加 meta 标签（下篇）
- 7.2 媒体查询（上篇）
- 7.2.1 深入理解媒体查询的类型（上篇）
- 7.2.2 页面断点的添加（中篇）
- 7.2.3 响应式列的添加（下篇）
- 7.3 流式布局
- 7.4 响应式图片
- 7.5 本章小结
- 第八章 层叠图层及其嵌套
- 8.1 用 layer 图层来操控层叠规则（上篇）
- 8.1.1 图层的定义（上篇）
- 8.1.2 图层的顺序与优先级（下篇）
- 8.1.3 revert-layer 关键字（下篇）
- 8.2 层叠图层的推荐组织方案
- 8.3 伪类 :is() 和 :where() 的用法
- 8.4 CSS 嵌套的使用
- 8.4.1 嵌套选择器的使用
- 8.4.2 深入理解嵌套选择器
- 8.4.3 媒体查询及其他 @规则 的嵌套
- 8.5 本章小结
- 第九章 CSS 的模块化与作用域
- 9.1 模块的定义
- 9.1.1 模块和全局样式
- 9.1.2 一个简单的 CSS 模块
- 9.1.3 模块的变体
- 9.1.4 多元素模块
- 9.2 将模块组合为更大的结构
- 9.2.1 模块中多个职责的拆分
- 9.2.2 模块的命名
- 9.3 CSS 的作用域
- 9.3.1 CSS 作用域的就近原则
- 9.3.2 划定作用域的边界
- 9.3.3 CSS 中的隐式作用域
- 9.3.4 关于 CSS 作用域与层叠图层
- 9.4 CSS 模式库
- 9.5 本章小结
- 第十章 CSS 容器查询
- 10.1 容器查询的一个简单示例
- 10.1.1 容器尺寸查询的用法
- 10.2 深入理解容器
- 10.2.1 容器的类型
- 10.2.2 容器的名称
- 10.2.3 容器与模块化 CSS
- 10.3 与容器相关的单位
- 10.4 容器样式查询的用法
- 10.4.1 将模块与所在容器解耦
- 10.4.2 减少重复代码
- 10.5 本章小结
- 第 11 章 颜色与对比
- 11.1 通过对比进行交流
- 11.1.1 模式的建立
- 11.1.2 还原设计稿
- 11.2 颜色的定义
- 11.2.1 色域与色彩空间
- 11.2.2 CSS 颜色表示法（RGB、Hex、HSL、HWB、LAB/OKLAB、LCH/OKLCH）
- 11.3 利用 OKLCH 处理颜色（上篇）
- 11.3.4 从页面其他颜色衍生出新颜色（下篇）
- 11.4 思考字体颜色的对比效果
- 11.5 本章小结
- 第 12 章 CSS 排版与间距
- 12.1 间距设置
- 12.1.1 使用 em 还是 px
- 12.1.2 对行高的深入思考
- 12.1.3 行内元素的间距设置
- 12.2 Web 字体
- 12.3 谷歌字体
- 12.4 @font-face 的工作原理
- 12.4.1 字体格式与回退处理
- 12.4.2 同一字型的多种变体形式
- 12.5 性能因素考量
- 12.5.1 font-display 属性解析
- 12.5.2 可变字体的用法
- 12.6 调整字间距，提升可读性
- 12.6.1 正文的字间距
- 12.6.2 标题、小元素和间距
- 12.7 本章小结
- 附录
- 附录A：CSS 选择器参考
- 附录B：CSS 预处理器简介
译注：
letterboxing是一种屏幕宽高比渲染方式，是指如果要在宽高比为4:3的设备上渲染16:9的图像，为了保留画面完整性，图像将与设备同宽，并在上下添加黑边的显示模式。 ↩︎
