不透明度

不透明度衡量图层或 UI 元素阻挡其后方内容的程度，以百分比表示，从 0% (完全透明) 到 100% (完全不透明)。它是透明度的反义：70% 不透明度等于 30% 透明度。

不透明度和 Alpha 通道相关但作用于不同层级：

• 不透明度：均匀应用于整个图层或元素。例如 Photoshop 的图层不透明度滑块和 CSS opacity
• Alpha 通道：逐像素控制透明度，直接嵌入图像数据中

CSS 提供两种透明度方法：

• opacity: 0.5 - 使整个元素 (包括子元素) 半透明。文字和子元素一起变为半透明
• background-color: rgba(0, 0, 0, 0.5) - 仅背景变为半透明，文字保持完全不透明

在图像编辑器中，降低图层不透明度使其与下方图层混合。常见应用包括摄影中的双重曝光效果和文字后方的半透明色彩叠加以提高可读性。

从性能角度看，opacity 变化由 GPU 加速，使其成为动画的理想选择，优于切换 visibility 或 display。此属性是 Web 上淡入淡出过渡的基础。结合 transition 或 @keyframes，不透明度动画可实现流畅的 60fps 渲染而不触发布局重计算。