rgba()未生效是因为父元素或自身设置了opacity、背景色被其他CSS覆盖，或使用了background简写属性；文字看不清需加text-shadow或调低白色透明度；IE8不支持rgba()需PNG降级；fixed定位下需注意性能与下拉残影问题。
导航条背景用 rgba() 为什么没变半透明？
因为父元素或自身设置了 opacity，或者背景色被其他 CSS 覆盖（比如 background-color: #000 写在 rgba() 后面）。rgba() 只作用于单个颜色值，不是全局透明度开关。
- 确保写法是
background-color: rgba(0, 0, 0, 0.7)，不是rgba(0,0,0,0.7) !important这类冗余写法（除非真有冲突） - 检查是否误用了
opacity: 0.7—— 它会让整个导航条（含文字、子元素）一起变透明，通常不是想要的效果 - 如果用了
background-image或background简写属性，rgba()可能被覆盖；优先用background-color单独设置
移动端导航条加 rgba() 后文字看不清怎么办？
半透背景 + 白色文字在浅色页面滚动时容易对比度不足，尤其 iOS Safari 默认字体渲染偏淡。这不是 bug，是视觉真实反馈。
- 给文字加
text-shadow: 0 1px 2px rgba(0,0,0,0.3)提升可读性（别用太重的阴影） - 避免纯白文字（
#fff），改用hsl(0,0%,95%)或rgba(255,255,255,0.95)留点“灰度余量” - 用
@supports (backdrop-filter: blur(1px))做渐进增强：半透背景 + 毛玻璃效果，比单靠rgba()更稳
rgba() 在 IE8 及更老浏览器里完全不生效
IE8 及以下只支持 4 位十六进制色（如 #8888），不识别 rgba()。强行降级会直接回退到透明——也就是背景消失，露出底层内容。
- 如果必须兼容 IE8，用 PNG 背景图替代，或借助
filter: progid:DXImageTransform.Microsoft.gradient（仅限线性渐变，不推荐） - 现代项目建议直接放弃 IE8 支持；检查
caniuse.com可知rgba()在 IE9+ 全面可用 - 注意：PostCSS 或 Autoprefixer 不会为
rgba()加前缀，它本身无 vendor prefix 需求
导航条固定定位（position: fixed）+ rgba() 的常见性能陷阱
半透背景本身不卡，但配合 fixed 和滚动事件监听时，容易触发频繁重绘，尤其在低端安卓机上。
立即学习“前端免费学习笔记（深入）”；
- 避免在
:hover或@media查询中动态切换rgba()值——CSS 层叠计算开销比想象中大 - 如果需要滚动变色（比如从透明到半透），用
will-change: background-color提前提示渲染引擎（但别滥用） - 慎用
rgba()配合box-shadow多层叠加，某些 Android WebView 会把整条导航条当“复杂图层”强制软渲染
rgba() 背景若不够深，就会暴露出下方内容的“残影”。得靠 transform: translateZ(0) 或 backface-visibility: hidden 强制硬件加速，但这些又可能带来新兼容问题。 
