←→ 切换·Esc 返回

透明度Opacity

样式与布局基础
让整个元素连同内容一起变透明

opacity 从 0 到 1 控制元素整体的透明程度，里面的文字和图片也会一起变淡。只想改变背景时应使用带透明度的颜色；完全透明的元素仍可能占位并接收点击。

100%50%15%

什么时候用

  • 禁用态变淡：按钮 Button、输入框 Input 不可用降到 0.4 左右
    可用禁用
  • 悬停反馈：次要图标平时 0.5，悬停恢复 1
    ✎→✎
  • 半透明遮罩：弹窗 Modal 背后压暗但隐约可见
    弹窗
  • 淡入淡出：配 transition 是最常用的动效

什么时候不用

  • 只想让背景透明 → 用 rgba，opacity 会连内容一起变淡
    opacity .4rgba .4
  • 把正文透明度调低当“高级灰”：读着像没对上焦
    这段正文用透明度调成「高级灰」，读起来像没对上焦。
  • 不要把 opacity: 0 当成移除元素，它仍会占位并可能响应点击
    这里有个 opacity: 0 的按钮，还点得到
  • 半透明套半透明：叠几层之后颜色全脏了
    半透明套半透明，越叠越脏
组成结构 · Anatomy
opacity: 0.45背景透出来
1下层背景Backdrop透过来看见的东西
2半透明元素Elementopacity 小于 1，整体变淡
3透出效果See-through透明度越低，背景透得越多
常见变体 · Variants
禁用0.4
禁用
不可点的按钮、输入框
悬停0.8
悬停
次要图标平时淡一点
遮罩0.5
遮罩
弹窗背后压暗页面
完全隐藏0
0
占位做淡入动画时使用
典型使用场景
禁用按钮
opacity: 0.4 = 禁用
悬停反馈
设计规范.md ✎ ⧉ ★
次要图标平时 opacity 0.45，悬停的那个恢复 1
弹窗半透明遮罩
遮罩 rgba(.32)，背景隐约可见
✓ 保存成功
淡入淡出动画
已复制链接 → 已复制链接 → 已复制链接 transition: opacity .2s，淡入