透明度
Opacity
初级通用透明度（Opacity）表示元素及其内容显示得有多实：数值越低，底下的画面越容易透出来。它能帮你弱化装饰、呈现叠层；比如让页面角落的水印不抢正文的注意力。
你可能会说：「把背景那张装饰图调淡一点，让它还能看见，但别抢正文的注意力。」
动手看看报告页面的内部水印
拖动滑块，看水印怎样从醒目的遮挡变成轻轻盖在正文上的标记。opacity 会让水印的文字、边框和底色一起变淡。
要点透明度调低后，页面会发生什么？
- 1
数值决定能透出多少背景
在 CSS 中，opacity 从 0 到 1：1 是完全不透明，0 是完全看不见。设成 0.4 时，元素会和它背后的画面混合，所以最终看起来是什么颜色，也取决于底下有什么。
- 2
整个元素会一起变淡
你给一张卡片设置 opacity，卡片里的文字、图标也会跟着变淡。因为透明度作用在整个元素的显示结果上，所以再把子元素的 opacity 设为 1，也不能让文字恢复原本的清晰度。
- 3
看不见不等于不能操作
元素的 opacity 设为 0，只是视觉上消失了；它仍可能占着位置、接收点击或获得键盘焦点。如果你的意思是隐藏一个功能，还得处理它的交互和可访问状态。
容易混淆的地方
透明度调的是整个元素最终显示得有多实；带透明通道的背景色只让那层颜色透出，不会顺带淡化卡片上的文字。它也不是毛玻璃：毛玻璃会模糊背后的内容，单纯调低透明度只会让背后的内容更容易被看见。
什么时候用
适合用
- 给网站角落的水印图降低透明度，让人认得出标识，又能专心阅读正文。
- 让图表中的辅助网格线变淡，保留读数参照，同时突出数据线。
- 做图片渐入效果时，逐步改变透明度，让图片从不可见过渡到清晰。
不适合用
- 只想让卡片背景透出页面、文字仍清晰时，改用带透明通道的背景色。
- 想让弹窗后面的页面失焦时，改用背景模糊；调低透明度不会产生模糊。
- 要隐藏敏感信息并阻止访问时，改用权限控制或移除内容；透明度为零只管看不看得见。
练一练选一个答案，看看解释
你在做 AI 工具的生成中面板：背景插画要淡一些，上面的状态文字仍要清晰。你会怎么改？
让 AI 帮你做复制给 AI Agent 直接用
请调整生成中面板的透明度：只让背景插画变淡，状态文字、按钮保持清晰。检查现有结构，避免把 opacity 设在包含文字和按钮的父容器上；修改后说明你调整了哪个图层。