opacity控制整个元素及子内容透明度，取值0～1；rgba()仅让背景透明而文字保持不透明；ie8需用filter且无法实现背景透明+文字不透明；opacity创建层叠上下文且不继承。
opacity 属性直接控制整个元素透明度
设置 opacity 是最常用、最直接的方式，它作用于元素及其所有子内容（文字、背景、边框、子元素都会一起变透明）。取值范围是 0（完全透明）到 1（完全不透明），支持小数，比如 0.75。
常见错误是写成百分比形式（如 opacity: 75%;），这在 CSS 中无效，浏览器会忽略该声明。
示例：
.box {
opacity: 0.6;
}
注意：opacity 会影响整个渲染树节点，如果只想让背景变透而文字保持不透明，这个方案就不合适。
background-color 用 rgba() 单独控制背景透明度
当只要背景透明、内容（文字/子元素）保持 100% 不透明时，用 rgba() 替代 hex 或 rgb() 更安全。第四个参数 a 就是 alpha 通道，取值也是 0～1。
容易踩的坑：
-
rgba(0, 0, 0, 0.5)和opacity: 0.5视觉效果可能相似，但前者只动背景，后者连文字都变灰了 - 不要混用：比如
background-color: #000; opacity: 0.5;—— 这会让文字也半透明，通常不是你想要的
示例：
.card {
background-color: rgba(255, 255, 255, 0.9);
color: #333;
}
IE8 及更老浏览器不支持 opacity 和 rgba 怎么办？
如果必须兼容 IE8，opacity 需要加私有滤镜写法，而 rgba() 则完全不可用（即使加滤镜也无法模拟）。
IE8 的 filter 写法仅对块级元素生效，且会触发 hasLayout，可能引发其他布局问题：
.ie8-fallback {
opacity: 0.4;
filter: alpha(opacity=40); /* IE8 及以下 */
}
现代项目基本不需要考虑这个，但如果维护老系统，得意识到：IE8 下无法实现“背景透明+文字不透明”的效果，只能妥协为整体半透明。
透明度叠加时要注意层叠上下文和继承行为
opacity 会创建新的层叠上下文，影响 z-index 行为；同时它**不继承**，但子元素会因父元素变透明而“看起来”变透明——这不是继承，而是渲染合成的结果。
典型陷阱：
- 给父容器设
opacity: 0.8，再给子元素设opacity: 1，子元素依然只有 0.8 的视觉不透明度（因为它是父元素渲染输出的一部分） - 两个重叠的
opacity: 0.5元素，叠加区域不是1.0，而是按混合规则计算，实际更暗，类似 Photoshop 的正片叠底
真正需要独立控制子元素透明度时，得把它们从同一个父容器里拆出来，用定位等方式模拟重叠关系。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
