material design遮罩必须用rgba()而非opacity，以确保文字图标100%不透明；背景图层中linear-gradient()须置于url()前；伪元素遮罩需content、定位及z-index；深色与高对比度模式下rgba值须动态校准。
Material Design遮罩色必须用rgba()，不能用opacity
Material Design规范中所有遮罩（overlay）都要求仅背景透光、文字和图标保持100%不透明。一旦对容器设opacity，子元素会连带变淡，直接违反可读性标准。官方组件库（如MDC Web）内部全部使用rgba(0, 0, 0, 0.32)这类值，而非opacity: 0.32。
常见错误现象：opacity: 0.32导致按钮文字发虚、图标边缘模糊、焦点 outline 被削弱——这些在无障碍测试中会被直接标为失败。
- 深色模式下，遮罩需动态切换：推荐用
CSS变量配合@media (prefers-color-scheme: dark)重定义rgba()值 - Material图标字体（如
material-icons）本身不支持opacity继承，但若父容器误设opacity，仍会强制降级渲染 - Android WebView（尤其旧版）对
opacity的合成性能较差，滚动时易掉帧；rgba()走GPU加速路径更稳
background-image多层叠加时，linear-gradient()必须写在url()前面
Material风格的卡片悬停遮罩、Banner图层渐变蒙版，都依赖这个顺序。浏览器按逗号分隔的先后顺序从上到下绘制图层，linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))必须是第一个参数，否则它会被图片压在底下，完全不可见。
典型错误写法：background-image: url(bg.jpg), linear-gradient(...) → 遮罩失效；background-image: linear-gradient(...) url(bg.jpg) → 缺少逗号，整条声明被忽略。
- 单色遮罩用重复色标即可：
linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2))，避免写成to bottom, ...引发方向歧义 - 如果背景图本身含Alpha通道（如PNG），叠加
rgba()遮罩后实际透出的是PNG透明区+遮罩混合色，需提前在设计稿里验证最终叠加效果 - 不要试图用
mix-blend-mode替代——Material规范明确禁止非线性混合，multiply或screen会导致色相偏移，验收通不过
伪元素实现遮罩时，z-index和position缺一不可
Material组件常用::before实现遮罩，但只写background-color: rgba(0,0,0,0.12)没用。伪元素默认无尺寸、无定位、无堆叠上下文，必须显式声明才能覆盖在图片上。
关键点：父容器得先有position: relative，否则::before的absolute会相对于body定位，遮罩错位到页面左上角。
-
content: ""必须写，否则伪元素不渲染（哪怕加了background） -
top: 0; left: 0; right: 0; bottom: 0比width: 100%; height: 100%更可靠，能撑满padding区域 -
z-index: 1足够，Material规范中遮罩层级严格限定在内容之下、浮层之上（即z-index: 2以上属于Snackbar、Dialog等）
深色模式与高对比度模式下，rgba()值必须重新校准
Material Design明确要求遮罩在深色背景下降低透明度（如从rgba(0,0,0,0.32)降到rgba(0,0,0,0.12)），否则文字可读性暴跌。这不是“微调”，而是WCAG 2.1 AA级合规硬性条件。
容易被忽略的是Windows高对比度模式（@media (forced-colors: active)）：此时浏览器会强制重置所有rgba()的alpha为1或0，遮罩可能完全消失或变成实心黑块。
- 解决方案：用
CSS变量统一管理遮罩值，并在@media (prefers-color-scheme: dark)和@media (forced-colors: active)中分别覆盖 - 切勿用
hsla()替代rgba()——Material色彩系统基于RGB空间定义，hsla()在深色模式下色相漂移不可控 - Chrome DevTools的“Rendering”面板里开启
Emulate CSS media features，手动触发forced-colors测试，比靠猜靠谱得多
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
