透明度Opacity
你可能会说
这张图太抢戏了，把它调得半透明一点。
透明度是通过 opacity 同时降低元素及其全部子内容可见程度的 CSS 属性淡入提示框或弱化非当前内容时可设置 opacity。只想让背景半透明应改用 rgba；opacity: 0 的元素仍可能占位置或被点击，隐藏交互还需处理焦点。
组成结构 · Anatomy
opacity: 0.45背景透出来
透过来看见的东西
opacity 小于 1，整体变淡
透明度越低，背景透得越多
常见变体 · Variants
禁用0.4
禁用
不可点的按钮、输入框
悬停0.8
悬停
次要图标平时淡一点
遮罩0.5
遮罩
弹窗背后压暗页面
完全隐藏0
0
占位做淡入动画时使用
典型使用场景
禁用按钮
opacity: 0.4 = 禁用
悬停反馈
设计规范.md
✎
⧉
★
次要图标平时 opacity 0.45，悬停的那个恢复 1
弹窗半透明遮罩
淡入淡出动画
已复制链接
→
已复制链接
→
已复制链接
transition: opacity .2s，淡入
延伸阅读 · 权威出处