CSS3 遮罩 - 技术栈

在网页设计中，我们经常需要实现一些特殊的视觉效果来增强用户体验。CSS3 遮罩（mask）允许我们通过控制元素的可见区域来创建各种精美的视觉效果。本文将带你全面了解 CSS3 遮罩的功能和应用。

什么是 CSS3 遮罩？

CSS3 遮罩是一种通过定义元素的可见区域来控制元素显示的技术。遮罩属性最早出现在 2009 年的 Safari 浏览器上，经过多年发展，现在已被 Firefox、Chrome、Edge 等主流浏览器广泛支持（IE 除外）。随着规范进入候选推荐阶段，CSS 遮罩已经成为前端开发者的必备技能之一。

遮罩的基本使用

准备工作

要使用遮罩效果，我们需要准备：

一张作为背景的图片（如 jpg 格式）
一张带有透明区域的遮罩图片（png 格式）

简单示例

html 复制代码

<div class="masked-element"></div>

css 复制代码

.masked-element {
  width: 800px;
  height: 600px;
  background: url('background.jpg') no-repeat center/cover;
  -webkit-mask-image: url('mask.png');
  mask-image: url('mask.png');
}

在这个例子中，只有遮罩图片中不透明的部分才会显示背景图片的内容。

渐变遮罩

除了使用图片，我们还可以使用渐变来创建遮罩效果：

css 复制代码

.masked-element {
  -webkit-mask-image: linear-gradient(transparent 20%, white 80%);
  mask-image: linear-gradient(transparent 20%, white 80%);
}

这会创建一个从顶部 20% 透明到 80% 不透明的渐变遮罩效果。

遮罩属性详解

CSS 遮罩提供了丰富的属性来控制遮罩效果：

mask-image

默认值为 none，表示没有遮罩图片。可以设置的值为透明图片，或透明渐变。

mask-repeat

表示遮罩层是否允许重复，默认值为 repeat 允许重复，可选值与 background-repeat 相同。

css 复制代码

.masked-element {
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

mask-position

该属性用于设置遮罩层的位置，默认值为0 0 在最左上角，可选值与background-position 相同。

css 复制代码

.masked-element {
  -webkit-mask-position: center;
  mask-position: center;
}

mask-size

该属性用于设置遮罩层的大小，默认值为 auto ，可选值与 background-size 相同

css 复制代码

.masked-element {
  -webkit-mask-size: contain;
  mask-size: contain;
}

mask-origin

默认值为 border-box ，可选值与 background-origin 相同，可以设置如下的属性值：

css 复制代码

.masked-element {
  -webkit-mask-origin: content-box;
  mask-origin: content-box;
}

mask-clip

默认值为 border-box ，可选值与 background-clip 相同，可以设置如下属性值：

css 复制代码

.masked-element {
  -webkit-mask-clip: content-box;
  mask-clip: content-box;
}

mask-mode

mask-mode 属性默认值为 match-source ，作用是根据资源的类型自动采用合适的遮罩模式。mask-mode 可选值为 alpha、luminance、match-source。

如果遮罩效果使用的是 SVG 中的 <mask > 元素，则此时的 mask-mode 属性的值为 luminance ，表示基于亮度来判断是否要进行遮罩。如果是其他场景，则计算值是 alpha ，表示基于透明度判断是否要进行遮罩。白底的 JPG 图片使用默认的遮罩模式是没有预期的遮罩效果的，此时就非常适合设置遮罩模式为 luminance。

css 复制代码

.masked-element {
  mask-mode: luminance; /* 基于亮度遮罩 */
}

mask-type

mask-type 属性的功能和 mask-mode 属性类似，都是设置不同的遮罩模式，mask-type 属性只能作用于 SVG 元素上，因为其本质上是由 SVG 属性演变而来的，Chrome 等浏览器也都支持该属性。

由于 mask-type 属性只能作用于 SVG 元素上，因此默认值表现为 SVG 元素默认遮罩模式，也就是默认值是 luminance 亮度遮罩模式。如果需要支持透明度遮罩模式，可以设置为alpha。

mask-composite

mask-composite 属性表示同时使用多张图片进行遮罩时的合成方式。默认值为 add ，可选值为 add、subtract、intersect、exclude。

mask-composite: add：表示遮罩累加，这是默认值
mask-composite: subtract：表示遮罩相减，也就是遮罩图片重合的区域不显示，这就意味着，遮罩层图片越多，遮罩区域越小。
mask-composite: intersect：表示遮罩相交，也就是遮罩图片重合的区域才显示遮罩。
mask-composite: exclude：表示遮罩排除，也就是遮罩图片重合的区域会被当作透明。

css 复制代码

.masked-element {
  -webkit-mask-composite: subtract;
  mask-composite: subtract;
}

实际应用场景

创意图片展示：使用自定义形状的遮罩展示产品图片
渐变过渡效果：在轮播图或页面过渡中使用渐变遮罩
文字特效：为文字添加纹理或渐变遮罩
不规则边框：创建非矩形的内容展示区域

性能考虑

过度使用复杂的遮罩效果可能会影响页面性能，特别是在移动设备上。建议：

尽量使用简单的渐变遮罩而非大尺寸图片
避免在动画中频繁改变遮罩属性
对静态元素使用遮罩效果