HTML CSS实现图片遮罩效果完整教程

说到图片遮罩效果，很多前端开发者会立刻想到CSS的mask-image属性。没错，它确实是现代浏览器中最接近“真遮罩”的CSS方案。但这里有个常见的误解：它和Photoshop里的蒙版图层不是一回事。CSS的遮罩依赖的是alpha通道或亮度值来裁切内容，而且默认会让图片变透明，而不是简单地叠加一层颜色。如果你想要的效果是“在图片上盖一层半透色块”，那其实应该用background-blend-mode或者伪元素叠加层，而不是mask。

那么，mask-image真正的用武之地在哪里呢？典型场景包括：按特定形状（比如圆形、星形、文字轮廓）裁剪图片、实现渐隐过渡效果，或者配合SVG路径完成复杂的镂空设计。它和clip-path的关键区别在于，mask支持软边、透明度过渡，甚至还能做动画。

用 mask-image 实现图片遮罩，但别直接套代码

直接上手写代码前，有几个技术细节必须心里有数：

• mask-image只接受url()（指向SVG或PNG）、linear-gradient()、radial-gradient()这些值，不能直接写颜色。
• 必须配合mask-size和mask-repeat来控制遮罩图的尺寸和重复行为，否则很容易出现拉伸或错位。
• Safari浏览器需要-webkit-mask-image前缀，而且它对mask-composite属性的支持也比较有限。
• 遮罩默认作用于整个盒模型（包括内边距和边框）。如果只想遮罩图片本身，通常的做法是把图片设为容器的background-image，然后对容器应用mask。

用 SVG 做精准灰度控制

当你需要对显示区域进行像素级精确控制时——比如哪些地方完全显示，哪些完全隐藏，哪些半透明——内联SVG的元素是最可靠的选择。它的规则非常直观：白色代表完全可见，黑色代表完全隐藏，灰色则根据灰度值来决定透明度。

关键点在于，不要将SVG作为外部图片引用，而是直接嵌入到HTML中，并通过id进行关联：

• SVG的必须存在于DOM中（不能只放在外部文件里），否则Safari可能无法识别。
• 通常不需要给设置宽高，它会自动匹配目标元素的尺寸。
• 如果遮罩内部使用了渐变，最好显式加上mask-type="luminance"声明（虽然默认就是luminance模式，但显式声明更稳妥）。
• 遮罩内的坐标系以目标元素的左上角为原点，单位可以使用像素或百分比，与SVG自身的viewBox无关。

mask-image 配 mask-mode: alpha 的坑

你可能会在文档中看到，mask-mode: alpha可以让PNG图像的alpha通道生效。但实际情况是，这个属性只在Firefox 浏览器中表现稳定。Chrome和Safari默认采用luminance（亮度）模式，这意味着即使你导出的PNG带有透明度，也会被当作灰度图来处理。

• 想要跨浏览器表现一致，最好不要依赖PNG的alpha通道，改用SVG mask或者纯CSS渐变。
• mask-mode: alpha在Chrome 115及以上版本才被支持，旧版本会直接忽略这个声明。
• 如果非要用PNG，确保它是单色灰度图（不带alpha通道），并明确设置mask-mode: luminance。
• 调试时，可以利用浏览器开发者工具中的“Rendering”面板，勾选“Mask overlays”选项，这样可以实时看到遮罩的覆盖范围。

替代方案：为什么有时候 ::before + opacity 更实用

其实，大约80%所谓的“图片遮罩需求”，本质上只是在图片上方叠加一层颜色滤镜。例如，在深色背景上让图片显得更亮，或者在鼠标悬停时添加一层蓝色调。这种情况下，硬要用mask-image无异于杀鸡用牛刀。

一个更轻量、兼容性更好、也更容易控制的做法是使用伪元素：

  

.img-overlay {
  position: relative;
}
.img-overlay::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.6));
  pointer-events: none;
}

• 伪元素可以自由设置background-blend-mode（比如multiply、screen），轻松实现类似Photoshop的混合模式效果。
• 悬停动画只需要对background或opacity做transition，性能比遮罩动画要好得多。
• 省去了考虑遮罩尺寸适配、浏览器前缀、SVG注入时机等一系列麻烦。
• 在响应式布局中，伪元素会自动跟随父容器尺寸变化，而mask-image往往需要手动同步mask-size。

说到底，mask真正不可替代的场景，是当你需要非矩形、非线性、带有软边或者需要动态生成的遮罩形状时。在其他大多数情况下，不妨先停下来想想：是不是用错了工具？