CSS 不透明度

学习 opacity 和 rgba 透明度 · 难度：入门 · +10XP

CSS 不透明度详解

opacity 属性控制元素的整体透明度，取值范围从 0（完全透明）到 1（完全不透明）。它是创建叠加效果、动画过渡和视觉层次的重要工具。

基本语法

opacity: number;
/* number 取值范围：0.0 ~ 1.0 */

值	效果
opacity: 0	完全透明（不可见但占据空间且可交互）
opacity: 0.5	半透明
opacity: 1	完全不透明（默认值）

opacity 与 rgba/hsla 的区别

这是初学者最容易混淆的概念：

方式	影响范围	文字是否透明
opacity: 0.5	整个元素（内容和子元素）	是
background: rgba(0,0,0,0.5)	仅背景	否
color: rgba(0,0,0,0.5)	仅文字	仅文字

/* 整个 div 半透明，文字也半透明 */
.half-transparent { opacity: 0.5; }
/* 仅背景半透明，文字保持不透明 */
.bg-transparent { background: rgba(0, 0, 0, 0.5); }

实际应用场景

图片叠加文字

.overlay {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.4);  /* 深色遮罩 */
  opacity: 0;
  transition: opacity 0.3s ease;
}
.container:hover .overlay {
  opacity: 1;
}

模态弹窗背景

.modal-backdrop {
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  transition: opacity 0.3s;
}
.modal-backdrop.show {
  opacity: 1;
}

禁用状态

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

opacity 与 visibility/display 的对比

属性	占据空间	可交互	可动画
opacity: 0	是	是（鼠标事件仍然触发）	是
visibility: hidden	是	否	是（显示/隐藏）
display: none	否	否	否

渐隐动画

.fade-in {
  opacity: 0;
  animation: fadeIn 0.5s ease forwards;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

性能提示

1. opacity 动画性能优秀，浏览器会使用 GPU 加速
2. 修改 opacity 不会触发回流（reflow），仅触发重绘
3. 配合 transform 和 will-change 得到最佳动画性能
4. 子元素无法覆盖父元素的 opacity（子元素最多和父元素一样不透明）

/* 性能优化 */
.animated-element {
  will-change: opacity, transform;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

opacity 虽然简单，但理解它与 RGBA 透明度的区别、了解它对子元素和交互的影响，是每个前端开发者必须掌握的基础知识。