不推荐在移动端使用 background-blend-mode 实现图片遮罩阴影，因其在 iOS Safari 13.4 前不支持、Android WebView 表现不一，且要求遮罩必须为同一 background 声明中的 background-image，无法作用于真实 <img> 元素；推荐用伪元素 + filter: drop-shadow() 方案，兼容性好、边缘贴合佳、可控性强。
background-blend-mode 在移动端图片遮罩阴影中不推荐直接使用
它在 iOS Safari 13.4 之前完全不支持，Android WebView 表现也不统一；即使现在支持了，background-blend-mode 要求遮罩必须是 background-image（不能是 <img>），且只能作用于同一层 background 的多个图层之间——这意味着你没法对一张真实图片元素加遮罩，只能用 background-image 模拟。
用伪元素 + filter 实现更稳妥的移动端阴影遮罩
这是目前兼容性最好、控制最灵活的方式：用 ::before 覆盖一层半透明色块，再用 filter: drop-shadow() 给伪元素加外阴影。比 box-shadow 更适合图片边缘贴合，且不会因圆角或 overflow:hidden 被裁掉。
常见错误现象：box-shadow 在 border-radius 图片上显示为方角阴影；text-shadow 被误用于图片；filter: blur() 单独用导致阴影发虚无方向感。
-
drop-shadow()参数顺序是drop-shadow(<offset-x> <offset-y> <blur-radius> <color>)，注意单位要带 px/rem，不能只写数字 - 伪元素需设
content: ""、position: absolute、宽高 100%，并确保父容器position: relative - iOS 上
filter在某些旧版 WKWebView 中会触发渲染闪烁，可加transform: translateZ(0)强制硬件加速
如果坚持用 background-blend-mode，必须满足三个硬条件
不是语法写对就行，而是整个渲染链路都要配合：
立即学习“前端免费学习笔记（深入）”；
- 图片必须作为
background-image写在容器上，不能用<img src="..."> - 遮罩层也得是另一个
background-image（比如线性渐变：linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6))） - 两个背景必须写在同一
background声明里，用逗号分隔，且background-blend-mode值与图层数一一对应（如两层背景，就写一个值；三层，就写两个逗号分隔的值）
示例写法：background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(img.jpg); background-blend-mode: multiply;
真正影响效果的其实是图片加载时机和 DPR 适配
很多“阴影没显示”问题，实际是图片还没加载完成，background-image 渲染为空白，导致 blend 失效；或者高 DPR 屏幕下，background-size: cover 拉伸后遮罩错位。
- 给容器设固定宽高或
aspect-ratio，避免背景图缩放抖动 - 用
image-set()或媒体查询提供 2x/3x 背景图，否则遮罩在 iPhone 上看起来偏淡或模糊 - 不要依赖
load事件监听background-image，它不触发；可用IntersectionObserver+ 尝试读取getComputedStyle(el).backgroundImage是否含url来粗略判断
复杂点在于：遮罩的视觉权重得随图片明暗动态调整，但 CSS 没法感知图片内容——这时候就得切到 JS + canvas 分析主色调，再反推遮罩透明度。不过那已经是另一层问题了。
