CSS mask-image：给元素 “戴” 上创意面具的隐藏技巧

在前端设计中，我们常常需要实现一些特殊的视觉效果：比如让图片只显示特定形状，或让背景图以渐变的方式逐渐消失。这些效果如果用传统的overflow: hidden或图片裁剪，不仅灵活度低，还会增加额外的元素嵌套。而 CSS 的mask-image属性，就像一把 "数字剪刀"，能给元素 "戴" 上自定义面具，只显示面具覆盖的区域，轻松实现各种创意效果。今天，我们就来解锁这个 "隐藏技能"。

一、认识 mask-image：比 clip-path 更灵活的裁剪工具

mask-image的作用是：用一张图片或渐变作为 "面具"，元素只有在遮罩不透明的区域才会显示。遮罩中透明的部分，元素会被隐藏；遮罩半透明的部分，元素会半透明显示。

1.1 与 clip-path 的区别

很多人会混淆mask-image和clip-path，两者都能实现裁剪效果，但核心差异在于：

clip-path：通过几何路径（如圆形、多边形、SVG 路径）裁剪元素，只能实现规则或自定义路径的硬边缘裁剪。
mask-image：通过图片或渐变的透明度来控制显示区域，支持柔和边缘、复杂纹理，甚至动态动画。

简单说，clip-path像 "剪纸"，mask-image像 "盖章"------ 前者靠形状，后者靠透明度。

1.2 基础语法：一张图就能实现遮罩效果

mask-image的语法与background-image类似，支持图片 URL、渐变或 SVG：

css 复制代码

/* 用图片作为遮罩 */
.element {
  mask-image: url("mask.png");
  /* 兼容webkit内核浏览器（Chrome、Safari等） */
  -webkit-mask-image: url("mask.png");
}

/* 用渐变作为遮罩 */
.element {
  mask-image: linear-gradient(to right, black, transparent);
  -webkit-mask-image: linear-gradient(to right, black, transparent);
}

核心原理：

遮罩中alpha通道（透明度）为1（完全不透明）的区域，元素正常显示。
遮罩中alpha通道为0（完全透明）的区域，元素被隐藏。
遮罩中alpha通道为0~1（半透明）的区域，元素半透明显示。

注意：目前大部分浏览器仍需要添加-webkit-前缀（如 Chrome、Safari、Edge），实际使用时记得写兼容写法。

二、核心用法：从基础到进阶的遮罩效果

2.1 用图片作为遮罩：显示特定形状

准备一张黑白或透明背景的图片作为遮罩（推荐 PNG 格式，支持透明通道），就能让元素只显示遮罩的形状。

示例：用圆形遮罩显示图片中心区域

html 复制代码

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

css 复制代码

.masked-image {
  width: 300px;
  height: 300px;
  background-image: url("photo.jpg"); /* 原始图片 */
  background-size: cover;
  /* 用圆形遮罩图片（中间不透明，边缘透明） */
  -webkit-mask-image: url("circle-mask.png");
  mask-image: url("circle-mask.png");
  -webkit-mask-size: cover; /* 遮罩大小与元素一致 */
  mask-size: cover;
}

效果如下：

效果：原始图片只会在圆形遮罩的不透明区域显示，形成 "圆形图片" 效果，且边缘可以通过遮罩图片实现柔和过渡（这是clip-path: circle()难以做到的）。

2.2 用渐变作为遮罩：实现渐隐效果

渐变（linear-gradient、radial-gradient等）是mask-image最常用的工具，无需额外图片，就能实现平滑的过渡效果。

（1）线性渐变：横向 / 纵向渐隐

css 复制代码

/* 从左到右逐渐消失（左边显示，右边隐藏） */
.fade-out {
  width: 400px;
  height: 200px;
  background: url("banner.jpg") center/cover;
  -webkit-mask-image: linear-gradient(to right, black 60%, transparent 100%);
  mask-image: linear-gradient(to right, black 60%, transparent 100%);
}

效果如下：

black表示遮罩不透明（元素显示），transparent表示遮罩透明（元素隐藏）。
60%和100%是颜色停止点：前 60% 保持不透明，60% 到 100% 之间逐渐过渡到透明。

（2）径向渐变：中心向外渐隐

css 复制代码

/* 从中心向外逐渐消失 */
.radial-fade {
  width: 300px;
  height: 300px;
  background: #ff6b6b;
  -webkit-mask-image: radial-gradient(circle, black 50%, transparent 70%);
  mask-image: radial-gradient(circle, black 50%, transparent 70%);
}

效果如下：

效果：元素中心（50% 范围内）完全显示，50% 到 70% 之间逐渐变淡，70% 以外完全隐藏，形成类似 "光晕" 的效果。

2.3 多重遮罩：叠加效果更丰富

mask-image支持同时使用多个遮罩，用逗号分隔，类似background-image的多重背景：

css 复制代码

/* 叠加两个渐变遮罩 */
.double-mask {
  width: 400px;
  height: 200px;
  background: url("texture.png");
  -webkit-mask-image: linear-gradient(to bottom, black, transparent),
    radial-gradient(circle at center, black, transparent);
  mask-image: linear-gradient(to bottom, black, transparent), radial-gradient(circle
        at center, black, transparent);
  /* 调整遮罩位置和大小 */
  -webkit-mask-size: 100% 100%, 200px 200px;
  mask-size: 100% 100%, 200px 200px;
  -webkit-mask-position: center, center;
  mask-position: center, center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

效果如下：

效果：两个遮罩叠加后，元素只有在两个遮罩都不透明的区域才会显示，形成更复杂的形状。

2.4 动态遮罩：配合动画实现交互效果

mask-image支持 CSS 动画，通过改变遮罩的位置、大小或透明度，实现动态过渡效果。

示例：鼠标悬停时遮罩 "揭开"

css 复制代码

.hover-mask {
  width: 300px;
  height: 200px;
  background: url("card.jpg") center/cover;
  transition: all 0.5s ease;
  /* 初始遮罩：右侧透明（元素右侧隐藏） */
  -webkit-mask-image: linear-gradient(to left, black, transparent 50%);
  mask-image: linear-gradient(to left, black, transparent 50%);
}

.hover-mask:hover {
  /* 悬停后遮罩：完全不透明（元素全显示） */
  -webkit-mask-image: linear-gradient(to left, black, black);
  mask-image: linear-gradient(to left, black, black);
}

效果如下：

效果：鼠标未悬停时，元素右侧被隐藏；悬停时，遮罩逐渐变为完全不透明，元素完整显示，实现 "揭开卡片" 的交互效果。

三、实用技巧：让遮罩效果更可控

3.1 控制遮罩的位置与大小

与background属性类似，mask-image也有配套的属性来控制遮罩的显示方式：

属性	作用	示例
`mask-size`	控制遮罩的尺寸	`mask-size: 200px 150px`
`mask-position`	控制遮罩的位置	`mask-position: center center`
`mask-repeat`	控制遮罩是否重复	`mask-repeat: no-repeat`
`mask-origin`	控制遮罩的定位原点	`mask-origin: content-box`
`mask-clip`	控制遮罩的裁剪边界	`mask-clip: padding-box`

示例：让遮罩居中显示且不重复

css 复制代码

.element {
  -webkit-mask-image: url("star-mask.png");
  mask-image: url("star-mask.png");
  -webkit-mask-size: 100px 100px;
  mask-size: 100px 100px;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

3.2 用 SVG 作为遮罩：实现矢量级精准控制

SVG 作为矢量图形，放大后不会失真，非常适合作为需要适配不同尺寸的遮罩。只需在 SVG 中定义<mask>元素，然后在mask-image中引用即可。

步骤 1：定义 SVG 遮罩

xml 复制代码

<!-- mask.svg -->
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
 <!-- 定义一个ID为"text-mask"的遮罩 -->
 <mask id="text-mask">
   <!-- 背景为黑色（透明） -->
   <rect width="100%" height="100%" fill="black" />
   <!-- 文字为白色（不透明），作为显示区域 -->
   <text x="50%" y="50%" font-size="40" text-anchor="middle" fill="white">MASK</text>
 </mask>
</svg>

步骤 2：在 CSS 中引用 SVG 遮罩

css 复制代码

.text-mask-element {
  width: 400px;
  height: 200px;
  background: linear-gradient(45deg, #4285f4, #34a853);
  /* 引用SVG中的遮罩（#text-mask） */
  -webkit-mask-image: url("mask.svg#text-mask");
  mask-image: url("mask.svg#text-mask");
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

效果如下：

效果：元素背景是渐变，但只在 SVG 文字 "MASK" 的区域显示，形成 "文字形状的渐变" 效果，且文字边缘清晰（矢量特性）。

3.3 兼容处理：应对浏览器差异

虽然现代浏览器（Chrome 80+、Firefox 70+、Edge 80+）都支持mask-image，但仍有两点需要注意：

添加前缀 ：WebKit 内核浏览器需要-webkit-前缀，实际开发中需同时写标准属性和前缀属性。
降级方案 ：对于不支持mask-image的浏览器（如 IE），可以用clip-path或半透明图片作为降级效果。

css 复制代码

/* 完整兼容写法 */
.element {
  /* 标准属性 */
  mask-image: url("mask.png");
  mask-size: cover;
  mask-position: center;
  /* WebKit前缀 */
  -webkit-mask-image: url("mask.png");
  -webkit-mask-size: cover;
  -webkit-mask-position: center;
  /* 降级方案：IE等不支持的浏览器显示完整图片 */
  /* [if IE]>
   background-image: url('fallback-image.jpg');
 <![endif] */
}

四、实战案例：创意效果展示

4.1 渐变文字遮罩

用渐变作为文字的遮罩，实现 "文字渐隐" 或 "文字内渐变" 效果：

html 复制代码

<h1 class="gradient-mask-text">创意文字效果</h1>

css 复制代码

.gradient-mask-text {
  font-size: 4rem;
  font-weight: bold;
  /* 文字颜色（会被遮罩影响） */
  color: #333;
  /* 用渐变作为遮罩，让文字从左到右渐隐 */
  -webkit-mask-image: linear-gradient(to right, black, transparent 80%);
  mask-image: linear-gradient(to right, black, transparent 80%);
}

效果如下：

效果：文字从左到右逐渐消失，比单纯的text-shadow更有设计感。

4.2 动态加载动画

用圆形渐变遮罩配合动画，实现 "圆形加载" 效果：

html 复制代码

<div class="loader"></div>

css 复制代码

.loader {
  width: 100px;
  height: 100px;
  background: conic-gradient(#4285f4, #34a853, #fbbc05, #ea4335);
  border-radius: 50%;
  /* 圆形遮罩：中间透明，边缘不透明 */
  -webkit-mask-image: radial-gradient(circle, transparent 40%, black 40%);
  mask-image: radial-gradient(circle, transparent 40%, black 40%);
  /* 旋转动画 */
  animation: spin 1.5s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

效果如下：

效果：通过遮罩只显示元素的边缘环形区域，配合旋转动画，形成 "彩色加载环" 效果，比传统的border实现更灵活。

五、总结

mask-image是一个 "小而美" 的 CSS 属性，它通过遮罩的透明度控制元素的显示区域，比clip-path更灵活，能实现渐变过渡、纹理叠加、动态交互等创意效果。核心要点：

工作原理：遮罩不透明区域显示元素，透明区域隐藏元素。
常用场景：图片裁剪、渐隐效果、文字创意设计、动态交互。
实用技巧 ：配合mask-size、mask-position控制遮罩显示，用 SVG 作为矢量遮罩。

如果你想让设计突破常规的矩形限制，又不想依赖复杂的图片编辑，mask-image会是一个强大的工具。下次需要实现特殊形状或过渡效果时，不妨试试给元素 "戴" 上一个创意面具 ------ 简单几行代码，就能让界面瞬间提升质感。

你在项目中用过mask-image吗？欢迎在评论区分享你的创意用法～