CSS mask属性为HTML元素添加渐变或图片遮罩

先明确一个核心概念：mask属性本身并不直接“创造”渐变或图片遮罩。真正负责这项工作的，是mask-image属性，而mask更像是一个“简写容器”，可以一并设置mask-mode、mask-repeat等参数。在现代前端项目中，直接使用mask-image配合linear-gradient()或url()引用图片，是控制最精细的方式。但这条路，你得先看清前方的“兼容性断层”。

为什么 mask-image: linear-gradient() 在 Safari 和 Firefox 表现不一致

问题往往不在于你的CSS语法写错了，而在于不同浏览器内核对于“如何将一段CSS渐变解析为遮罩”这件事，有着截然不同的逻辑。

• Safari（15.4+）的灰度执念：它要求mask-image中的渐变颜色必须是纯灰度值。它只认#000（完全显示）、#fff（完全隐藏）以及中间的灰阶（按比例半透明）。如果你用了rgba(0,0,0,0.5)，Safari很可能会将其视为无效值，最终整个遮罩降级为全透明，导致效果失效。
• Firefox的“不支持”现状：截至当前，Firefox 浏览器仍然不支持将CSS渐变值直接用于mask-image属性。这意味着你写的渐变声明会被完全忽略，元素会退回到无遮罩的原始状态。
• Chrome/Edge的良好支持与“前缀陷阱”：基于Chromium的浏览器（Chrome, Edge）对此支持良好，但需要注意，在一些旧版本的Blink内核中，可能需要添加-webkit-mask-image前缀才能正确触发渲染。

举个例子，如果你写了mask-image: linear-gradient(to bottom, black, transparent)，结果会是：在Firefox中等同于没写；在Safari中，transparent可能会被转换成#000（黑色），导致遮罩变成从上到下都是“全显示”，效果同样失效。

用 url(#id) 引用 SVG 是最稳的渐变遮罩方案

那么，有没有一条路能绕过这些CSS解析的分歧，实现全平台一致的渐变遮罩呢？答案是肯定的，那就是把渐变定义在SVG的元素里，再用CSS去引用它。这套方案在所有现代浏览器中都有着极高的稳定性和精准的Alpha通道控制能力。

• 结构是关键：必须放置在标签的（定义区）内。这个容器可以设置width="0" height="0"来将其隐藏，不占用视觉空间。
• 颜色限制：在SVG的或中，stop-color（色标颜色）建议使用十六进制值（如#000、#fff），避免使用rgba()或颜色名，以确保最大兼容性。
• 工作原理：SVG遮罩依据的是亮度（luminance）。白色区域对应元素100%显示，黑色区域对应0%显示，灰色则按灰度比例显示。
• 应用方式：对HTML元素应用时，通常需要同时写上带前缀和不带前缀的声明以确保兼容：-webkit-mask: url(#fadeMask); mask: url(#fadeMask);。如果是对SVG图形本身应用，则使用属性mask="url(#fadeMask)"。

伪元素叠加 background-gradient 不是 mask，但更实用

很多时候，我们的需求可能没那么复杂。如果只是想实现一种“视觉上看起来像有遮罩”的效果——比如在背景图片上叠加一层从黑色到透明的渐变，让上面的文字更突出——那么，使用::before伪元素配合background: linear-gradient()是更轻量、兼容性更好、调试也更直观的方案。

• 本质区别：它并不改变元素真实的透明度或裁剪其形状，只是在其上方覆盖了一个半透明的层。因此，它完全不存在浏览器解析差异的问题。
• 灵活度高：rgba()可以随意使用，透明度从0.1到0.9都能实时生效，并且完美支持响应式缩放和CSS hover动画。
• 实现要点：确保容器设置了position: relative，伪元素则需设置content: ""、position: absolute以及top/left/right/bottom: 0来铺满整个容器。
• 注意事件穿透：如果被覆盖的元素（比如一个按钮内的图片）需要接收点击或聚焦事件，务必给伪元素加上pointer-events: none，否则它会像一层玻璃一样拦截所有交互。

别混淆 mask-image 和 background-image 的叠加顺序

这里有一个非常常见的理解误区：有人试图用background: linear-gradient(), url(...)这种多重背景语法来实现“遮罩”，结果发现渐变总是“盖不住”图片，或者效果不对。这是因为background的绘制顺序是从后往前，图片层在渐变层的下面。这相当于把渐变当成了背景的一部分，而不是作用于元素最终呈现的“蒙版”。

• 正确逻辑：真正的遮罩（无论是CSS mask-image还是SVG ），是作用于元素渲染输出的最终结果上的，它决定了最终哪些像素显示、哪些不显示。
• 能力边界：background的多层叠加只能模拟视觉上的叠加效果，无法实现真正的Alpha通道裁剪。比如，你无法用它来制作文字边缘的羽化效果，或者根据一个复杂形状（如圆角）来精确裁剪元素的边框。
• 选择依据：对于需要Alpha级精密控制的场景——例如创建圆角渐变边框、实现中心清晰边缘模糊的聚焦效果，或者为非矩形头像添加裁剪——你必须使用mask-image或SVG 这条技术路径。

说到底，技术选型的核心在于先厘清需求本质：你究竟是需要“看起来像”的视觉效果，还是“必须按Alpha通道精确裁剪”的功能实现？前者用伪元素方案省心省力；后者则绕不开SVG ，并且需要你手动处理灰度映射、坐标系统（maskUnits是使用用户空间还是对象边界框）等细节。有个调试小技巧：当遮罩形状不如预期时，临时将mask属性替换为background: red来高亮显示遮罩区域，远比对着文档猜测偏移量要直观高效得多。