mask-image是依赖alpha或亮度裁切的真遮罩方案，支持软边、透明过渡与动画，适用于按形状裁剪、渐隐及SVG镂空；非矩形/软边需求才不可替代，否则伪元素叠层更轻量兼容。
用 mask-image 实现图片遮罩，但别直接套代码
现代浏览器中，mask-image 是最接近“真遮罩”的 CSS 方案，但它不等于 Photoshop 里的蒙版图层——它依赖 alpha 通道或亮度值做裁切，且默认会把图片变透明（而不是叠加颜色）。如果你期望的是“图片上盖一层半透色块”，那其实是 background-blend-mode 或伪元素叠层，不是 mask。
真正要用 mask-image 的典型场景是：按形状裁剪图片（比如圆形、星形、文字轮廓）、做渐隐过渡、或配合 SVG 路径实现复杂镂空。它和 clip-path 不同，mask 支持软边、透明度过渡、甚至动画。
-
mask-image只接受url()（SVG 或 PNG）、linear-gradient()、radial-gradient()，不能直接写颜色值 - 必须配
mask-size和mask-repeat控制贴图行为，否则容易拉伸错位 - Safari 需要
-webkit-mask-image前缀，且对mask-composite支持有限 - mask 默认作用于整个盒模型（包括 padding/border），想只遮罩图片内容，得把图片设为
background-image，再对容器应用 mask
用 SVG <mask></mask> 做精准灰度控制
当你要精确控制哪些区域完全显示、哪些完全隐藏、哪些半透明时，内联 SVG 的 <mask></mask> 是最可靠的方式。它的规则简单：白色 = 完全可见，黑色 = 完全隐藏，灰色 = 按灰度值透明度显示。
关键不是把 SVG 当图片引用，而是把它嵌在 HTML 里，用 id 关联：
立即学习“前端免费学习笔记（深入）”；
<svg width="0" height="0">
<mask id="fade-mask">
<rect width="100%" height="100%" fill="white"/>
<rect y="60%" width="100%" height="40%" fill="black"/>
</mask>
</svg>
<img src="photo.jpg" style="max-width:90%" alt="HTML怎么做图片遮罩效果_html CSS mask图片遮罩效果【完整版】" >
- SVG
<mask></mask>必须在 DOM 中（不能仅靠外部文件），否则 Safari 不识别 - 不要给
<mask></mask>设宽高，它自动匹配目标元素尺寸 - 如果 mask 内用了渐变，记得加
mask-type="luminance"（默认是 luminance，但显式声明更稳） - mask 中的坐标系以目标元素左上角为原点，单位是像素或百分比，和 SVG 自身 viewBox 无关
mask-image 配 mask-mode: alpha 的坑
你可能会看到文档说 mask-mode: alpha 能让 PNG 的 alpha 通道生效，但实际中它只在 Firefox 表现稳定；Chrome 和 Safari 默认走 luminance 模式（即把 PNG 当灰度图处理），哪怕你导出的是带透明度的 PNG，也照样被当黑白图用。
- 想跨浏览器一致，就别依赖 PNG alpha，改用 SVG mask 或纯 CSS 渐变
-
mask-mode: alpha在 Chrome 115+ 才支持，旧版本无视该声明 - 如果非要用 PNG，确保它是单色灰度图（无 alpha），并明确设
mask-mode: luminance - 调试时用 DevTools 的 “Rendering” 面板勾选 “Mask overlays”，能实时看到 mask 覆盖范围
替代方案：为什么有时候 ::before + opacity 更实用
80% 的所谓“图片遮罩需求”，其实只是要在图片上叠加一层颜色滤镜（比如深色背景上让图片提亮、悬停时加蓝调）。这时候硬上 mask-image 是杀鸡用牛刀。
更轻量、兼容性更好、可控性更强的做法是：
<div class="img-overlay">
<img src="photo.jpg" alt="HTML怎么做图片遮罩效果_html CSS mask图片遮罩效果【完整版】" >
</div>
.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），做出类似 PS 混合模式的效果 - hover 动画只需 transition
background或opacity，比 mask 动画性能好得多 - 不需要考虑 mask 尺寸适配、前缀、SVG 注入时机等额外负担
- 如果要响应式，伪元素自动跟随父容器尺寸，而 mask-image 往往需要手动同步
mask-size
mask 真正不可替代的地方，是当你需要非矩形、非线性、带软边或动态生成的遮罩形状时——其他时候，先想想是不是用错了工具。
