透明度Opacity

不透明度实验台：给遮罩定一个值

任务是为「活动报名卡」的半透明遮罩定不透明度。拖动滑块看遮罩压暗，再切 opacity 整块与 rgba 背景两种写法，看确认文字是否跟着一起淡。结果长在遮罩与按钮物件上。

面板里读到的结论

刚才的遮罩深浅、确认文字和候补按钮，对应的是 opacity 的几条主线：整体变淡、rgba 通道、次要弱化、禁用语义、独立验收。

• opacity 作用于整块：元素连同子元素和文字作为一个整体等比变淡，不能只弱化某一段文字。
• 半透明背景配清晰文字要用 rgba/色彩通道：把透明度写进 background-color，而不是套在容器 opacity 上。
• 次要信息可弱化：辅助说明、占位图常落在 0.5–0.7；关键文字、错误/成功状态保持 1.0。
• opacity ≠ 禁用：禁用要原生 disabled 或 aria-disabled 加 not-allowed 指针，opacity 只是视觉提示。
• opacity:0 仍占位：元素不可见但保留布局且不响应；真隐藏要配合 visibility:hidden 或 display:none。
• 对比度要独立验收：透明层叠在复杂背景上时，前景文字与合成背景的对比须单独测，不能靠透明度补。

什么时候该动 opacity

看到次要信息抢主、需要遮罩聚焦、或要做图层氛围时用；正文可读性、禁用语义和关键状态别交给 opacity 单独承担。

怎么从需求走到透明度

从「这块东西要不要被读、要不要被看见」倒推写法，再在真实背景上复测。

1. 先分主次：主文字、状态、主操作保持 1.0；只有辅助说明、占位、装饰层考虑弱化。
2. 选写法：要半透明背景配清晰文字，优先 rgba/hsla 的背景通道；只有整块（含文字）一起淡时才用容器 opacity。
3. 定数值：次要内容落在 0.5–0.7，遮罩按底层复杂度给 0.45–0.7，避免低于 0.4 当正文。
4. 禁用单独处理：用 disabled/aria-disabled 加 not-allowed，opacity 仅作视觉收口。
5. 在真实背景、深浅主题和高对比模式下复测文字对比，确认关键内容不因透明度消失。

盯这些关注点

调 opacity 时容易只盯「淡一点」，文字对比、禁用语义和 0 值占位更容易出问题。

• 盯文字对比：透明容器内的文字会被一起压淡，关键文字别套在低 opacity 容器里。
• 盯禁用语义：别用 opacity 单独表达禁用，行为和可达性由 disabled 承担。
• 盯 opacity:0：它仍占位、仍可能被读屏读出；要真隐藏配合 visibility/display 或 aria-hidden。
• 盯层叠背景：透明层压在图片、渐变上时，给文字一个稳定底色或独立对比验收。

同一张确认遮罩：正例与反例

目标都是让遮罩压暗底层、又让确认文字清晰。差异只在遮罩用 rgba 还是 opacity。