父元素opacity会让子元素发灰，因其作用于整个渲染盒（painting box），使文字、图片等所有后代统一变淡；实际透明度为父级×子级乘积，无法用子元素opacity:1恢复；应改用rgba()仅控制背景等指定属性的透明度。
为什么父元素 opacity 会让子元素发灰
因为 opacity 不是颜色属性，而是作用于整个渲染盒（painting box）的层叠透明度。它会把父元素及其所有后代——文字、图片、按钮、甚至伪元素——统一压暗。哪怕你在子元素上写 opacity: 1，也只是在已变淡的画布上“再画一遍”，实际视觉效果仍是父级透明度 × 子级透明度 = 最终透明度。这不是 bug，是 CSS 渲染规范决定的。
用 rgba() 替代 background-color 是最直接解法
只让背景透，内容照常清晰，不用改 HTML 结构，兼容性也够用（IE9+）。关键点在于：把原本写死的十六进制或 rgb 颜色，换成带 alpha 通道的 rgba() 值。
-
background-color: #000→ 改成background-color: rgba(0, 0, 0, 0.4) -
border: 1px solid #666→ 改成border: 1px solid rgba(102, 102, 102, 0.3) - 渐变里别用
rgba(0,0,0,0)表示透明段，改用transparent，避免旧浏览器误解析为黑色
注意：rgba() 只影响你明确赋值的属性（比如背景、边框、文字色），不会波及子元素的布局、交互或其它样式。
复杂背景时用伪元素 ::before 分离图层
当背景是图片 + 模糊 + 半透叠加，或者需要和 backdrop-filter 配合时，rgba() 直接写在 background 上可能不够灵活。这时用伪元素把“遮罩层”单独抽出来更可控：
- 给容器设
position: relative - 加
.container::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: 1; } - 确保内容子元素
z-index: 2，且不设opacity
这样背景遮罩和内容完全解耦，调透明度只动伪元素，子元素连 DOM 层级都不受影响。
别忽略那些“没写 opacity 却变淡”的祖先元素
有时候你检查了当前父元素，没发现 opacity，但文字还是发虚。大概率是某个更上层的祖先（比如模态框 wrapper、页面根容器、甚至 body）偷偷加了 opacity 或 backdrop-filter。这种影响是穿透式的，必须用浏览器开发者工具逐层往上查 computed 样式里的 opacity 和 filter 值。真正麻烦的不是怎么修，而是得先定位到那个藏得深的“透明源”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
