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

前端老鹰2025-07-25 14:33

在前端设计中，我们常常需要实现一些特殊的视觉效果：比如让图片只显示特定形状，或让背景图以渐变的方式逐渐消失。这些效果如果用传统的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，但仍有两点需要注意：

  1. 添加前缀 ：WebKit 内核浏览器需要-webkit-前缀，实际开发中需同时写标准属性和前缀属性。

  2. 降级方案 ：对于不支持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吗？欢迎在评论区分享你的创意用法～

相关推荐
崔庆才丨静觅4 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60615 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了5 小时前
「2025 年终总结」在所有失去的人中，我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅5 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅6 小时前
5分钟快速搭建 AI 平台并用它赚钱！
前端
崔庆才丨静觅6 小时前
比官方便宜一半以上！Midjourney API 申请及使用
前端
Moment6 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅6 小时前
刷屏全网的“nano-banana”API接入指南！0.1元/张量产高清创意图，开发者必藏
前端
剪刀石头布啊7 小时前
jwt介绍
前端
爱敲代码的小鱼7 小时前
AJAX（异步交互的技术来实现从服务端中获取数据）：
前端·javascript·ajax
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03openclaw配置教程（linux+局域网ollama）04UV安装并设置国内源05OpenClaw Chrome扩展使用教程 - 浏览器中继控制06Linux下V2Ray安装配置指南07Claude Code Skills 实用使用手册08Vue-skills的中文文档09让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南10一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示