微信小程序蒙版应使用独立view层叠加，避免opacity影响图片本身；需用rgba设置透明度、pointer-events: none防交互拦截，并在ios深色模式下加color-scheme: light确保显示正常。
直接用background叠层最稳，别碰filter: opacity
用opacity调图层透明度会把图片本身也变淡，这不是“蒙版”，是“整张图发灰”。真要盖蒙版，就得让图和蒙层分离——图片用<image></image>，蒙层用独立<view></view>绝对定位盖上去。
常见错误是写成：<image src="..." style="opacity: 0.3"></image>，结果文字看不清、图标细节糊掉。正确做法是：
-
<image></image>保持原样不加任何透明样式 - 外层
<view class="mask-wrapper"></view>设position: relative - 内部
<view class="mask-layer"></view>设position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4)
rgba()比hsla()更兼容，尤其小程序端
小程序对hsla(0, 0%, 0%, 0.4)支持不稳定，某些安卓机型会渲染成纯黑或直接失效。统一用rgba(r, g, b, a)最保险，数值也直观。
参数差异注意点：
- 黑色蒙版常用：
rgba(0, 0, 0, 0.4)（偏暗场景）或rgba(255, 255, 255, 0.6)（浅色图上提亮文字） - alpha 值别设低于
0.2，否则在 OLED 屏上几乎不可见；高于0.7又容易压住图中关键信息 - 避免用
transparent当颜色值——它在部分低端 Android WebView 中会被忽略
滚动区域里蒙版要加pointer-events: none
如果图片在<scroll-view></scroll-view>或长列表里，蒙层没关交互，会拦截所有点击和滑动，导致页面卡死或按钮失灵。
必须加这条样式：
.mask-layer {
pointer-events: none;
}
但注意：如果你的蒙层上还要放按钮或文字链接，就只能把可点击元素单独抽出来，用pointer-events: auto覆盖：
- 蒙层本身设
pointer-events: none - 上面的
<view class="mask-text"></view>设pointer-events: auto - 不要嵌套在蒙层内再设
pointer-events: auto，nvue 下无效
App 端 iOS 深色模式下蒙层发灰？加color-scheme: light
App 端开启深色适配后，rgba(0,0,0,0.4)可能被系统自动映射成更深的灰，看起来像脏污。这不是 bug，是深色模式对半透色的主动增强。
解决方式很简单，在蒙层 class 里加一句：
.mask-layer {
color-scheme: light;
}
这句只影响该元素及其子元素的系统颜色映射逻辑，不影响其他组件。H5 和小程序无需加，加了也无效。
真机调试时最容易忽略的是蒙层尺寸没撑满——width: 100%在 flex 容器里可能失效，务必确认父容器有明确宽高，或直接写right: 0; bottom: 0;兜底。
