不透明度外观
整个元素连同它里面的内容一起变透明的程度。
- 整个东西透明一点
- 看得见后面的内容
- 变淡但没消失
- 不透明度
- 透明度
- alpha
示例
opacity: 1;
Web / iOS / Android 对照
Web原生支持
平台通用范围
opacity
CSS: opacity
iOS原生支持
平台通用范围
opacity
SwiftUI: .opacity(_:)
官方描述是「设置这个视图的透明度」——作用对象是整个视图。
Android原生支持
平台通用范围
alpha
Compose: Modifier.alpha
官方描述是「以修改后的 alpha 绘制内容，可以小于 1」。
使用规范
什么时候用
- 需要让元素整体减弱而不是消失时
- 需要表达「暂时不可用」而保留位置时
什么时候别用
- 只想调背景色的深浅时——那应该改颜色本身的 alpha
- 透明到看不清、实际等于隐藏时
容易混淆
跨端框架实现
- Flutter
OpacityOpacity(opacity: …, child: …)有独立的 Opacity Widget。
给 AI 的提示词
这条词条还没有经过验证的实现提示词。