当前内容所在位置(可进入专栏查看其他译好的章节内容)
- 第四部分 视觉增强技术 ✔️
- 【第 13 章 渐变、阴影与混合模式】 ✔️
- 13.1 渐变
- 13.1.1 使用多个颜色节点(上)
- 13.1.2 颜色插值方法(中)
- 13.1.3 径向渐变(下)
- 13.1.4 锥形渐变(下)
- 13.2 阴影
- 13.2.1 利用渐变和阴影打造立体感
- 13.2.2 使用扁平化设计创建元素
- 13.2.3 创建混合风格的按钮外观
- 13.3 混合模式 ✔️
- 13.3.1 为图片上色 ✔️
- 13.3.2 混合模式的类型 ✔️
- 13.3.3 图片纹理的添加 ✔️
- 13.3.4 融合混合模式的用法 ✔️
- 13.4 本章小结 ✔️
文章目录
- 13.3 混合模式 Blend modes
- 13.3.1 为图片上色 Tinting an image
- 13.3.2 混合模式的类型 Types of blend modes
- 13.3.3 图片纹理的添加 Adding texture to an image
- 13.3.4 融合混合模式的用法 Mix blend modes
- 13.4 本章小结 Summary
《CSS in Depth》新版封面
译者按
本篇就 CSS 混合模式洋洋洒洒介绍了四节内容,但要真正达到熟练应用的地步,还需要大量的实践与自我摸索,文章只是提纲挈领地带大家过了一遍主要的知识点,以便今后快速定位问题。CSS 就是这样一门入门容易精通难的语言。除了文中提到的在线工具资源外,大家还可以结合剪映 APP 中的混合模式(位于画中画特效)来巩固所学。只要留心周围的应用场景、再配合目标明确的刻意练习,理论上就没有学不会的新知识。
13.3 混合模式 Blend modes
大部分情况下,无论是使用真正的图片还是设置渐变,元素一般只会使用一张背景图片。但某些情况下可能需要用到两张或者更多背景图片,CSS 也提供了相应支持。
背景图片属性(property)可以接受任意数量的属性值,每个值之间用逗号分隔即可。例如:
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 混合两张背景图片
.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 将背景颜色的色调混合到背景图片上
.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
为图片添加纹理
.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 使用融合混合模式将多个元素混合到一起
.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
的图像,为了保留画面完整性,图像将与设备同宽,并在上下添加黑边的显示模式。 ↩︎