应使用 rgba() 等颜色函数设置背景透明，而非 opacity，因 opacity 会使子元素继承叠加透明度导致内容发虚；rgba() 只作用于指定颜色属性，确保文字等内容保持完全不透明。
用 opacity 设置父元素透明度时，子元素会**继承并叠加**该透明度，导致整体发虚、文字看不清。这不是 bug，而是 CSS 规范行为。真正想让“背景透明、内容不透明”，应该避开 opacity，改用 rgba()（或 hsla()、transparent）只给**背景色或边框色**加透明通道。
✅ 正确做法：用 rgba() 控制背景透明，不碰 opacity
只把透明度作用在你需要的部分（比如背景），文字、图片、按钮等子元素保持 100% 不透明：
- 背景色用
rgba(0, 0, 0, 0.6)—— 黑色半透，文字照常清晰 - 边框用
border: 1px solid rgba(100, 100, 100, 0.3) - 渐变背景也可用 rgba 色值：
background: linear-gradient(to right, rgba(255,0,0,0.2), rgba(0,0,255,0.2))
⚠️ 为什么 opacity 不行？它影响整个渲染树
opacity 是作用于**整个元素及其所有后代**的绘制层（painting layer）。即使你给子元素写 opacity: 1，它也只是在已变淡的父层上再“努力不更淡”，无法恢复原始不透明度。相当于给整张照片加了蒙版，再在上面画字也一样发灰。
? 其他安全替代方案
- 用伪元素
::before绘制半透背景，主内容层独立定位——背景可透，内容完全不受影响 - CSS 自定义属性 + rgba：方便统一管理透明度变量，例如
--bg-alpha: 0.7;→background: rgba(255, 255, 255, var(--bg-alpha)); - 现代方案：用
backdrop-filter做毛玻璃效果（注意兼容性），它只影响背景区域，不改变子元素透明度
? 小提醒：透明 ≠ 模糊，别混用 filter
filter: blur() 是模糊，opacity 是透明，rgba() 是带透明通道的颜色。三者原理不同，视觉效果也不同。需要“背景透、字清楚”，就老老实实选 rgba() 或伪元素方案。
立即学习“前端免费学习笔记（深入）”；
