当前位置：首页 > article >正文

【CSS in Depth 2 精译_085】14.2：CSS 蒙版的用法

article 2024/12/23 16:20:56

当前内容所在位置（可进入专栏查看其他译好的章节内容）

第四部分视觉增强技术 ✔️
【第 14 章蒙版、形状与剪切】 ✔️
14.1 滤镜
14.1.1 滤镜的类型
14.1.2 背景滤镜

14.2 蒙版 ✔️
14.2.1 带渐变效果的蒙版特效 ✔️
14.2.2 基于亮度来定义蒙版 ✔️
14.2.3 其他蒙版属性 ✔️

14.3 剪切路径

文章目录

- 14.2 蒙版 Masks
- - 14.2.1 带渐变效果的蒙版特效 Masking with a gradient
  - 14.2.2 基于亮度来定义蒙版 Masking using luminance
  - 14.2.3 其他蒙版属性 Other mask properties

《CSS in Depth》新版封面

《CSS in Depth》新版封面

译者按
自学这一节内容时，总感觉是在做视频剪辑，毕竟剪映里也有很多关于蒙版的设置，效果和 CSS 里的大同小异。由于是 2023 年年底才推出的新特性，作者也没有按蒙版属性逐一进行演示，而是挑选了两个典型案例重点讲解，其他的依葫芦画瓢即可。为了方便大家理解，我还特地增补了几处本地截图，更正了书中的一处笔误。一起来先睹为快吧！

14.2 蒙版 Masks

页面上的每个可见元素通常都是按一个矩形来渲染的。从页面设计的角度来看，有时会感觉束手束脚。圆角边框虽然可以让元素的四个角变成圆弧，甚至可以通过声明 border-radius: 50% 得到一个椭圆（oval），但也仅此而已。

所幸，CSS 提供了一些技术手段来调整元素的外形，而 蒙版（masking） 技术便是其中之一。利用蒙版技术，即应用某个蒙版，人们可以将某个图像作为参照物，并让浏览器有选择地隐藏或显示元素的某些部分。

图 14.4 为一个典型的带蒙版效果的元素示例。该元素的背景图片是之前演示过的翠鸟图片，同时该元素还设置了一个星形蒙版；蒙版图片本身的效果如图 14.5 所示。

图 14.4 一个设置了蒙版效果的示例页面元素

【图 14.4 一个设置了蒙版效果的示例页面元素】

图 14.5 星形蒙版本身的图片效果

【图 14.5 星形蒙版本身的图片效果】

蒙版图片通常都非常简单，如本例所示。其中星形是完全不透明的，而星形周围的区域则是完全透明的。浏览器其实是将蒙版与页面元素叠加，并且只允许元素中与蒙版可见区域重叠的部分渲染出来。至于蒙版是什么颜色其实并不重要，但用黑色来表示蒙版也是有好处的，这样就能让蒙版的形状一目了然。

警告

出于安全考虑，浏览器往往会将蒙版图片的加载限制到同一域（same domain）内，除非请求头专门设置了 CORS 跨域。此外，蒙版图片也不支持在 file:// 协议下加载。更多关于 CORS 跨域的介绍，详见 MDN 在线文档：https://mng.bz/JZaV。

想要在示例页面中实现一个带蒙版效果的元素，可以用一个简单的 div 元素开始：

<div class="mask"></div>

接着，将代码清单 14.6 中的示例样式添加到本地样式表中。该代码为元素指定了一些尺寸大小，添加了背景图片，还对蒙版进行了定义。

mask-image 属性（以及带浏览器前缀的 -webkit-mask-image 备用版本）从概念上看与 background-image 属性类似；同理，mask-size 也与 background-size 类似，并且也支持关键字 cover 和 contain。

代码清单 14.6 蒙版图片的应用

.mask {
  width: 300px;
  min-height: 300px;
  background-image: url(images/bird.jpg);
  background-size: cover;
  background-position: 100%;
  -webkit-mask-image: url(images/star-mask.png); /* 带浏览器前缀的回退方案（适用于 Chrome） */
  -webkit-mask-size: 100% 100%; /* 带浏览器前缀的回退方案（适用于 Chrome） */
  mask-image: url(images/star-mask.png); /* 指定蒙版图片的 URL */
  mask-size: 100% 100%; /* 调整蒙版图片的尺寸大小 */
}

想要预览上述样式代码的页面效果，直接用浏览器打开 HTML 文件是行不通的；因为浏览器的安全限制，蒙版无法在 file:// 协议下加载，只能通过某个 HTTP 服务器环境来访问。

为此，Node.js 的第三方工具包 http-server 提供了一种简单快捷的解决方案，可以基于您当前的文件目录来搭建本地服务器环境，进而实现静态资源的访问。如果本地还没有安装 Node.js，那么就现装一个（具体操作说明，详见：https://nodejs.org）。

Node 安装完毕后，进入示例 HTML 及 CSS 文件所在目录，并运行命令 npx http-server .，然后访问 http://localhost:8080/index.html（根据您的具体情况调整文件路径），应该就能看到上述示例效果了。如果更熟悉其他 HTTP 服务器，也可以切换到对应的 HTTP 服务器来操作。

在定义蒙版样式时，请务必确保所有的蒙版属性都有带 -webkit 前缀的样式回退方案。因为 Chrome 以及其他基于 Blink 引擎的浏览器（如 Edge 和 Opera 浏览器）直到前不久都还只支持带前缀的蒙版属性写法；而对不用写前缀的蒙版特性的支持，也不过是从 2023 年底才开始的。

14.2.1 带渐变效果的蒙版特效 Masking with a gradient

mask-image 属性也可以像 background-image 那样通过渐变来定义蒙版特效。由此生成的渐变效果将被视为蒙版图片，因此蒙版中任何透明的部分都将遮住元素相应位置的内容。（与 url() 中设置的路径不同，此时示例页若在 file:// 协议下打开，蒙版样式仍然有效。）

图 14.6 将渐变作为蒙版特效的示例效果

【图 14.6 将渐变作为蒙版特效的示例效果】

图 14.6 用的还是之前的页面，只是把渐变用作了蒙版图片。该渐变是从顶部的透明色渐变到底部的黑色。

上述蒙版对应的 CSS 代码如代码清单 14.7 所示。试根据代码中的最后两个声明同步更新本地样式表。注意，之前的 mask-size 属性在本例中就用不上了，因为渐变会自动填充页面元素。

代码清单 14.7 将渐变作为蒙版特效的示例样式代码

.mask {
  width: 300px;
  min-height: 300px;
  background-image: url(images/bird.jpg);
  background-size: cover;
  background-position: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black);
  mask-image: linear-gradient(to bottom, transparent, black);
}

您还可以尝试不同的渐变样式来实现各种蒙版特效，例如通过声明 radial-gradient(black 40%, transparent 70%) 来实现一个 渐晕效果（vignette effect） ¹；或者利用重复渐变来实现条纹特效，例如 repeating-linear-gradient(45deg, transparent 0px 30px, black 30px 60px)。

译注

为加深印象，我在本地实测了上文给出的两个渐变蒙版特效。一是径向渐变蒙版：

【补图1：实测径向渐变蒙版效果（radial-gradient(black 40%, transparent 70%)）】

另一个是重复线性渐变蒙版：

【补图2：实测重复线性渐变蒙版效果（repeating-linear-gradient(45deg, transparent 0px 30px, black 30px 60px)）】

使用蒙版可能会遇到困难，因为从本质上讲它们是不可见的。如果设置蒙版后，页面元素完全可见或者完全不可见，此时要找出蒙版存在的问题就会比较棘手。如果蒙版效果达不到预期，有时我会临时将 mask-image 改为 background-image（而属性 mask-size 则改为 background-size），因为它们的语法都是一样的；之后我便能清楚地看到蒙版是如何在元素上生效的，以便做进一步更正。

14.2.2 基于亮度来定义蒙版 Masking using luminance

默认情况下，蒙版图片是通过其 alpha 通道生效的；蒙版透明及半透明的部分会对目标元素的不透明度带来直接影响。您也可以基于亮度（luminance）来设置蒙版——利用黑色与白色来调节蒙版效果，而非蒙版的透明情况。该特性尤其适用于没有现成可用的透明蒙版图片的应用场景中。

要让蒙版切换到基于亮度来设置，需要用到 mask-mode 属性。注意，该属性直到 2023 年年底才刚刚添加到 Chrome 浏览器，目前上不支持带 -webkit 前缀的写法。若要启用该特性并作为页面核心功能，请务必提前查看该特性最新的浏览器支持情况（详见：https://mng.bz/wxVP）。

mask-mode 的初始值为 alpha。改为 luminance 后，蒙版特效的行为模式随即改变，此时蒙版图片的黑色部分会对应透明的像素点，而白色部分则对应不透明的像素点。白色与黑色之间的阴影效果则对应半透明的蒙版特效。

代码清单 14.8 给出了该模式下的一个示例 CSS 版本。在不使用元素的不透明度的情况下，通过渐变中的亮度来定义的蒙版特效，其最终效果与之前代码清单中的演示效果完全相同。

代码清单 14.8 基于图片亮度来定义蒙版的示例样式代码

.mask {
  width: 300px;
  min-height: 300px;
  background-image: url(images/bird.jpg);
  background-size: cover;
  background-position: 100%;
  -webkit-mask-image: linear-gradient(to bottom, black, white); /* 用灰度阴影来定义蒙版 */
  mask-image: linear-gradient(to bottom, black, white); /* 用灰度阴影来定义蒙版 */
  mask-mode: luminance; /* 启用亮度模式 */
}

【译注】

为了更好地理解亮度模式，这里给出我在本地实测的蒙版效果：

【补图3：启用亮度模式后的蒙版特效（与 alpha 模式下的效果相同）】

注意，在前面的示例（即代码清单 14.7 对应版本）中，黑色是作为不透明色来描述蒙版图片的可见部分的，至于具体是什么颜色并不重要，只要完全不透明即可；而本例中黑色所代表的含义与之前明显不同了。启用亮度模式后，黑色表示透明区域，而白色反倒表示可见区域了。

14.2.3 其他蒙版属性 Other mask properties

CSS 提供了多种蒙版属性来调节蒙版特效的具体行为、尺寸及生效位置。其中很多属性在概念上都与对应的背景属性 background-* 类似：

mask —— 该属性为下列所有蒙版属性的的简写形式。
mask-image —— 该属性用于设置蒙版图片。其属性值既可以是利用 url() 引用的图片文件，也可以是某个渐变函数，甚至还可以是页面上的 SVG 元素 <mask> 的 ID 选择器（例如 url(#my-svg-mask)）。此外还可以提供多个蒙版，各蒙版间用逗号分隔即可。
mask-position —— 用于指定蒙版的位置坐标 x 与 y 的值（相对于左上角的蒙版原点 mask-origin）。同时，坐标值还支持以下关键字：top、right、bottom、left 及 center。
mask-size —— 用于设置蒙版图片的尺寸。其属性值 x 和 y 既可以是某个长度值，也可以为百分比，或者使用关键字 cover、contain 或者 auto。如果使用简写形式 mask，则必须紧跟在表示 mask-position 的属性值后，并用斜线分隔，例如：mask: url(/mask.png) 10px 10px / 90%。
mask-repeat —— 指定蒙版图片是否以平铺的方式重复渲染。其初始值为 repeat，其他合法值包括：no-repeat、repeat-x、repeat-y、space 以及 round。其中，space 和 round 会根据元素的大小尽可能多地包含完整的蒙版图像，而不会对其进行裁剪。具体来说，space 会在各蒙版间添加间隙；而 round 则会通过均匀拉伸各蒙版来填满目标元素。
mask-origin —— 设置用于定位蒙版的原点类型。其初始值为 content-box，也可以改为 padding-box 或者 border-box。
mask-clip —— 用于设置会受蒙版特效影响的元素区域类型。其初始值为 border-box，也可以改为 padding-box 或者 content-box。
mask-mode —— 用于设置定义蒙版的参照依据：要么基于 alpha 通道，要么基于蒙版图片的亮度。其属性值可以是 alpha、luminance 以及 match-source。其中 match-source 为该属性的初始值，它基于 alpha 通道定义蒙版，但对于通过 ID 选择器引入的 SVG 图片源（详见 mask-image）而言，则启用亮度模式定义蒙版；
mask-composite —— 如果定义了多个蒙版，该属性则用于指定它们的组合方式，其合法的属性值包括：add（初始值）、subtract、intersect 以及 exclude。更多相关介绍及用法，详见 MDN 官方文档：https://mng.bz/qOWr。

Chrome 浏览器于 2023 年 12 月发布了一次大型更新来支持 CSS 的蒙版特效。在此之前，像 mask-clip、mask-mode 和 mask-composite 这样的属性并未获得完全支持，而对于其他蒙版属性还必须加注 -webkit 前缀方能使用。

关于《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 本章小结

第 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 本章小结

附录
附录A：CSS 选择器参考
附录B：CSS 预处理器简介