正在加载...

CSS 遮罩

Optional Advanced 刚刚铺完报纸分栏。这一课是另一个可选工具：遮罩。你在一个盒子上放模板。模板实心处能看见照片或颜色；空处那个盒子就消失。你不是把文章切成几股文字流，也不是在雪碧图上滑动图标格子。

直接答案

CSS 遮罩用 mask-image 藏起元素的一部分——PNG、SVG 或渐变。想象透过镂空喷漆。mask-size、mask-repeat 和 mask-position 的行为像背景层：cover、no-repeat、center。mask-mode 选择 alpha（遮罩文件的透明度）或 luminance（亮对暗）。边缘需要淡出时用遮罩。要硬切的圆或多边形时用 clip-path。标签和按钮保持完全可见。

为什么遮罩既不是分栏也不是雪碧图

多列会把一段文字流打碎。雪碧图用 background-position 裁切一张位图，让许多图标共用一个文件。遮罩两样都不做。元素仍占着自己的盒子。布局宽高不会缩小。你只改变这个盒子里哪些像素被画出来。滤镜（blur()、grayscale()）改变每个可见像素的样子；遮罩决定哪些像素留下。

把 PNG 当模板

mask-image 和 background-image 一样接受 url(...)。典型遮罩 PNG 在要保留照片的地方是白（或不透明），要挖洞的地方是透明：

PNG mask with mask-image

css 
.hero-photo {
width: 20rem;
height: 12rem;
background: url("/img/studio.jpg") center / cover no-repeat;
mask-image: url("/img/soft-blob.png");
mask-size: cover;
mask-repeat: no-repeat;
}

照片仍是背景（或带同一遮罩的 <img>）。那块斑点 PNG 只是模板。遮罩文件缺失时，整个元素可能消失——留一份无遮罩后备，或检查 URL。

用渐变做淡出

不必第二张图。渐变遮罩就是卡片底部天天见到的淡出：

Fade with a gradient mask

css 
.card-lead {
mask-image: linear-gradient(to bottom, #000 60%, transparent);
mask-repeat: no-repeat;
}

黑色（或完全不透明）保住内容；transparent 打洞。渐变写在 CSS 里，没有额外 HTTP——不像图标雪碧图。这不是整张卡片的 opacity：实心部分文字仍然清晰；只有被遮罩的区域溶解。

尺寸、重复、位置

把遮罩当成你永远不当成图画来看的背景层：

Size, repeat, and position

css 
.badge {
mask-image: url("/img/star-mask.svg");
mask-size: 4rem 4rem;
mask-repeat: no-repeat;
mask-position: center;
}

mask-size: cover 铺满盒子；contain 保住模板比例；长度钉住小形状。repeat 平铺模板（少见，容易过头）。有简写 mask，但层还没摸起来像 background 时，长属性更稳。

Alpha 对亮度

mask-mode 回答：「读透明度还是明暗？」

Luminance mask-mode on a photo

css 
.portrait {
mask-image: url("/img/gray-sculpt.jpg");
mask-mode: luminance;
mask-size: cover;
}

alpha（透明 PNG 上常常是默认）读遮罩的 alpha 通道。luminance 读明暗：白通常显示，黑通常隐藏——适合模板是灰阶照片而不是透明 PNG 的时候。JPEG 遮罩「没反应」，多半缺了 luminance。SVG 的 <mask> 还有 mask-type；HTML 盒子上从 mask-mode 起步。

硬裁切对软遮罩

clip-path 切几何：圆、inset、多边形。边是硬的。遮罩可以软。它们不是同一属性的两个名字：

Hard clip-path versus a soft mask

css 
.avatar {
clip-path: circle(50%);
}

.poster {
mask-image: radial-gradient(circle, #000 55%, transparent 80%);
mask-repeat: no-repeat;
}

头像和票据常常要 clip-path。溶进页面的主视觉海报要渐变遮罩。可以叠加，但每个属性一件事更平静。带 border-radius 的 overflow: hidden 是第三件工具：把子孙裁到内边距盒。遮罩画的是元素自身（含背景），不会把布局盒变圆。

Safari 与 WebKit 前缀

部分 Safari 版本仍要在标准属性旁边写 -webkit-mask-image（以及同类）：

WebKit prefix for Safari

css 
.fade-photo {
-webkit-mask-image: linear-gradient(#000 70%, transparent);
mask-image: linear-gradient(#000 70%, transparent);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}

前缀行和标准行都写。不要永远只发前缀。@supports 可以包额外规则；习惯是：在 Safari 里测淡出，不要只在 Chromium 里测。

遮罩 vs 裁切 vs overflow vs 雪碧图

📊 Mask vs clip-path vs overflow vs sprites

Tool Job Poor fit
mask-image / mask-mode Soft holes, fades, shaped photos on one element Hiding a whole form; replacing column layout
clip-path Hard circle, polygon, inset silhouette Soft dissolves; newspaper columns
overflow: hidden Clip descendants to the box (often with radius) Painting a gradient stencil on the element’s own pixels
Sprites (background-position) Many icon tiles from one bitmap Stenciling a hero photo; flowing article text
Multi-column (column-*) Newspaper fill of one text stream Visibility holes in a picture

Optional Advanced 已经用雪碧图做图标、用分栏做正文。遮罩是模板。三样叠在同一主视觉上，照片就会既像雪碧图被裁、又像分栏被切。

不要遮的东西

别用遮罩「收拾」乱布局。按钮或标签落在淡出下面，就没人读、没人点。读屏可能还在念文字，眼睛却什么都看不见——这是缺陷，不是功能。对比度在看得见的部分仍然重要。装饰照片、卡片、图标是常见对象；登录框不是。

Mask is not overflow or a sprite sheet

css 
.ok-art {
mask-image: linear-gradient(to right, #000, transparent);
}

.not-a-layout-fix {
/* don't: mask the entire toolbar because it overflowed */
}

.icons {
/* sprites still use background-position — not mask-image */
background-image: url("/img/icons.png");
background-position: 0 -32px;
}

子元素伸出卡片，用 overflow（或更小的子元素）修布局。若有十二个图标 HTTP 文件，用雪碧图或 SVG 集修资源。遮罩代替不了其中任何一项。

自己试

  1. 给彩色盒子 mask-image: linear-gradient(to bottom, #000 50%, transparent)，看底部溶解。
  2. 换上小 SVG 或 PNG 模板；设 mask-size 和 mask-position: center。
  3. 在灰阶 JPEG 上试 mask-mode: luminance，在透明 PNG 上试 alpha。
  4. 同一个圆用 clip-path: circle(50%)——注意硬边。
  5. 用同一渐变加上 -webkit-mask-image。不要给表单加遮罩。

常见错误

  • 把遮罩当整页布局或当 overflow: hidden
  • 忘了 mask-size，小模板缩在角落
  • 没有 mask-mode: luminance 却指望 JPEG 挖洞
  • 跳过 -webkit-mask-image 却怪 Safari「CSS 遮罩不行」
  • 把 clip-path 和 mask-image 当成一回事
  • 遮住标签、说明或按钮，对比度和点击目标一起死
  • 和雪碧图（格子偏移）或多列（文字流）搞混

小结

  • 遮罩是套在一个元素上的模板：这里显示，那里隐藏
  • mask-image 接受 url 或渐变；尺寸、重复、位置对照背景
  • mask-mode：alpha 对 luminance
  • clip-path 是硬几何切割；遮罩可以淡出
  • 给 Safari 写前缀；永远不要遮掉必要界面
  • Optional Advanced 下一课是用户界面（user-interface）

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 74 的 76
Css 教程