opacity属性控制元素整体透明度，取值0–1；仅背景透明需用rgba/hsla；IE8以下需filter fallback；transparent仅为颜色关键字，不适用于opacity。
opacity 属性直接控制整个元素的透明度
设置 opacity 是最常用、最直接的方式，它作用于元素自身及其所有子元素（包括文字、背景、边框等），取值范围是 0（完全透明）到 1（完全不透明），支持小数如 0.75。
- 必须用数字，不能写
opacity: 75%—— 这是无效语法 - 设为
0后元素仍占据文档流位置，且仍可响应事件（如click），只是看不见 - 若只想让背景变透明而保留文字清晰，
opacity不适用，得换方案
background-color 使用 rgba 或 hsla 控制背景层透明度
当只需透明化背景，而文字、边框等保持 100% 不透明时，应该避开 opacity，改用带 alpha 通道的颜色值：
-
background-color: rgba(0, 0, 0, 0.6)—— 黑色背景，60% 不透明（即 40% 透明） -
background-color: hsla(200, 100%, 50%, 0.3)—— 同样支持 alpha 参数 - 注意：不能对已声明的十六进制色（如
#333）直接加透明度；必须转成rgba或用hsla
IE8 及更早版本不支持 opacity 和 rgba，需 fallback
老版 IE（尤其是 IE8）既不识别 opacity，也不支持 rgba。如果项目还需兼容它们：
- 可用 IE 专属滤镜：
filter: alpha(opacity=60)（对应opacity: 0.6） - 但该滤镜会触发 hasLayout，可能引发布局偏移或 z-index 异常
- 现代项目基本可忽略，但若维护遗留系统，记得在 CSS 中叠加写法：
opacity: 0.6; filter: alpha(opacity=60);
transparent 关键字只适用于颜色类属性，不是通用透明开关
transparent 是一个颜色值，等价于 rgba(0,0,0,0)，仅可用于接受颜色的属性，比如：
立即学习“前端免费学习笔记（深入）”；
-
background-color: transparent✅ -
border-color: transparent✅ -
color: transparent✅（文字“隐形”，但依然占位） -
opacity: transparent❌ —— 语法错误，opacity只接受数字
别把它当成 opacity 的替代词，语义和适用范围完全不同。
