透明度属性
最后更新：2026-09-13
opacity 透明度属性
opacity 属性用于设置元素的整体透明度，取值范围为 0 到 1。0 表示完全透明，1 表示完全不透明。与设置透明背景不同，opacity 会影响元素及其所有子内容的透明度，常用于实现淡入淡出效果和视觉层次。
| 分类 | |
|---|---|
| 初始值 | 1 |
| 继承 | 否 |
| 适用于 | all |
| 可动画 | number |
| CSS 版本 | CSS3 |
| 状态 | 标准 |
📝 语法
opacity: <number [0,1]>;⚙️ 取值
| 值 | 类型 | 描述 |
|---|---|---|
<number [0,1]> | 类型 | 0 完全透明，1 完全不透明 |
▶ 示例
编辑下方代码，在 playground 中查看实时效果：
🌐 浏览器支持
| 浏览器 |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| opacity | ✓ v25 | ✓ v12 | ✓ v16 | ✓ v9 | ✓ v15 |
| 所有主流浏览器均支持 | |||||
注意： opacity 会影响整个元素包括其子元素，若只想让背景透明请使用 rgba 或 hsla 颜色。
提示： opacity 是可过渡属性，常用于实现淡入淡出动画效果。
❓ 常见问题
Qopacity 和 rgba 透明有什么区别？
Aopacity 作用于整个元素，会把背景、文字、边框和所有子元素一起变透明，且会创建新的层叠上下文；rgba() 只影响你指定的那一个属性（如背景色）的 alpha 通道，文字和子元素保持不透明。想让背景半透明而文字清晰用 rgba()，想整体淡入淡出用 opacity。
Qopacity: 0 和 display: none 有什么区别？
Aopacity: 0 时元素仍占据空间、仍可被点击，可参与过渡动画，屏幕阅读器仍能读到内容；display: none 时元素从文档流完全移除，不占空间、不可交互、内容不可读。淡入淡出动画用 opacity 过渡，彻底隐藏再考虑 display: none。
Qopacity: 0 和 visibility: hidden 有什么区别？
A两者都让元素不可见且不可点击，但 opacity: 0 仍占据空间、仍可被屏幕阅读器读取、支持渐变过渡动画；visibility: hidden 保留布局空间但内容对辅助技术也隐藏，且无法平滑过渡。做动效用 opacity，单纯隐藏用 visibility: hidden。
Q为什么用 opacity 做动画更流畅？
Aopacity 是合成属性，变化时浏览器只在合成线程完成透明叠加，不触发布局和绘制，容易达到 60fps；而修改 top、left 会触发重排重绘。淡入淡出、hover 显隐适合用 opacity 配合 transition。注意 opacity 会创建层叠上下文，可能影响 fixed 元素的层叠关系。
🏷️ 相关属性
💡 相关案例
📚 相关教程
