纯CSS图片遮罩首选background-blend-mode：设background-image+background-color，用multiply/overlay混合；非矩形需mask-image渐变或SVG蒙版；注意路径、CORS、文字对比度及层级。
用 background-blend-mode 快速实现图片遮罩（无需 JS）
纯 CSS 就能做，关键不是加一层 div 盖上去，而是让图片自己“混合”出遮罩感。最稳的方案是把图片设为背景，再用 background-color 和 background-blend-mode: multiply（或 overlay）叠加。
常见错误是直接对 <img> 标签用 mix-blend-mode —— 它依赖父容器堆叠上下文，容易被遮挡或失效；而 background-blend-mode 作用于同一层背景图+色值，可控性强。
-
background-image: url(...)+background-color: rgba(0, 0, 0, 0.4)是基础组合 - 遮罩深浅靠
rgba()的 alpha 值控制，0.3～0.6 最常用 -
background-blend-mode: multiply让暗部更沉、亮部保留细节；overlay对比更强，适合文字压图场景 - 必须设
background-size: cover和background-position: center，否则拉伸错位
用 clip-path + mask-image 做非矩形遮罩（如圆形/渐变）
如果遮罩要带形状或透明度过渡，background-blend-mode 就不够用了。这时候得上 mask-image：它接受渐变、图片甚至 SVG 作为蒙版，真正决定哪些区域可见。
注意 mask-image 默认是“白显黑隐”，和 Photoshop 的蒙版逻辑一致；而 clip-path 是硬裁切，只管形状不管透明度。
立即学习“前端免费学习笔记（深入）”；
- 线性渐变遮罩：
mask-image: linear-gradient(to bottom, black 60%, transparent 100%) - 圆形镂空：
mask-image: radial-gradient(circle at center, transparent 50px, black 50px) - 兼容性提醒：Chrome/Firefox/Edge 支持良好，Safari 15.4+ 才支持
mask-image的渐变写法 - 别漏掉
-webkit-mask-image前缀，尤其在线运行环境（如 CodePen、JSFiddle）里 Safari 用户可能看不到效果
在线运行时图片加载失败导致遮罩不生效？检查路径和跨域
本地跑得好，一贴到 HTML 在线编辑器（如 JSBin、CodeSandbox）就变空白，大概率是图片路径或 CORS 问题。这些平台默认不托管图片，file:// 或相对路径全会 404。
- 必须用绝对 URL，推荐放在
https://via.placeholder.com或https://picsum.photos这类免 CORS 图床 - 例如：
background-image: url(https://picsum.photos/800/600?random) - 如果用 Data URL（base64），长度受限且无法热更新，仅适合极简 demo
- 在线环境不支持
file://协议，哪怕你本地双击 HTML 文件能打开，粘过去就挂
遮罩后文字看不清？别只调 opacity，试试 text-shadow 或对比色
很多人给文字加 opacity: 0.9 想让它“透出”，结果整个字发灰、边缘糊。遮罩的本质是降低图片亮度，文字反而是需要更高对比度的元素。
- 优先换文字颜色：深图配白字（
color: white），浅图配黑字（color: #1a1a1a） - 加一层
text-shadow: 0 2px 4px rgba(0,0,0,0.5)，比调 opacity 更清晰 - 避免在遮罩图上直接放半透明白底文字块——这会破坏遮罩统一感，不如用
position: relative把文字单独定位，背景留空 - 如果图本身明暗不均（比如左亮右暗），考虑用
linear-gradient遮罩局部强化对比，而不是全局压暗
mask-image）作用于整个元素，但文字内容如果没脱离文档流或没设足够 z-index，可能被误裁。这类细节在线运行时难调试，建议先在本地用 Chrome DevTools 的 “Rendering > Mask overlays” 面板验证蒙版范围。 
