HTML怎么做图片遮罩效果_html CSS mask图片遮罩效果【完整版】-html教程-PHP中文网

mask-image是依赖alpha或亮度裁切的真遮罩方案，支持软边、透明过渡与动画，适用于按形状裁剪、渐隐及SVG镂空；非矩形/软边需求才不可替代，否则伪元素叠层更轻量兼容。

html怎么做图片遮罩效果_html css mask图片遮罩效果【完整版】

用 `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 做精准灰度控制

当你要精确控制哪些区域完全显示、哪些完全隐藏、哪些半透明时，内联 SVG 的是最可靠的方式。它的规则简单：白色 = 完全可见，黑色 = 完全隐藏，灰色 = 按灰度值透明度显示。

关键不是把 SVG 当图片引用，而是把它嵌在 HTML 里，用 id 关联：

<svg width="0" height="0"><mask id="fade-mask"><rect width="100%" height="100%" fill="white"></rect><rect y="60%" width="100%" height="40%" fill="black"></rect></mask></svg>
@@##@@

SVG 必须在 DOM 中（不能仅靠外部文件），否则 Safari 不识别
不要给设宽高，它自动匹配目标元素尺寸
如果 mask 内用了渐变，记得加 mask-type="luminance"（默认是 luminance，但显式声明更稳）
mask 中的坐标系以目标元素左上角为原点，单位是像素或百分比，和 SVG 自身 viewBox 无关

`mask-image` 配 `mask-mode: alpha` 的坑

你可能会看到文档说 mask-mode: alpha 能让 PNG 的 alpha 通道生效，但实际中它只在 Firefox 表现稳定；Chrome 和 Safari 默认走 luminance 模式（即把 PNG 当灰度图处理），哪怕你导出的是带透明度的 PNG，也照样被当黑白图用。

CSS工具箱(专业版)

全功能 CSS 工程手册，覆盖性能优化、无障碍、设计系统与跨浏览器兼容。

下载

想跨浏览器一致，就别依赖 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">
  @@##@@
</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;
}