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

什么是 CSS3 遮罩？

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

遮罩的基本使用

准备工作

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

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

简单示例

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

渐变遮罩

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

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

遮罩属性详解

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

mask-image

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

mask-repeat

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

mask-position

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

mask-size

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

mask-origin

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

mask-clip

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

mask-mode

mask-mode 属性默认值为 match-source，作用是根据资源的类型自动采用合适的遮罩模式。mask-mode 可选值为 alpha、luminance、match-source。如果遮罩效果使用的是 SVG 中的 <mask> 元素，则此时的 mask-mode 属性的值为 luminance，表示基于亮度来判断是否要进行遮罩。如果是其他场景，则计算值是 alpha，表示基于透明度判断是否要进行遮罩。白底的 JPG 图片使用默认的遮罩模式是没有预期的遮罩效果的，此时就非常适合设置遮罩模式为 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：表示遮罩排除，也就是遮罩图片重合的区域会被当作透明。

实际应用场景

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

性能考虑

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

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