opacity 作用于整个 painting box，子元素无法通过 opacity:1 恢复不透明——这是现代浏览器（含移动端）的规范行为；应改用 rgba() 控制背景透明度，或用伪元素隔离半透层。
直接给父元素设 opacity，子元素必然跟着变淡——这不是 bug，是移动端（及所有现代浏览器）的渲染机制决定的，没法靠子元素写 opacity: 1 拉回来。
为什么 opacity 在移动端也逃不掉子元素发灰
移动端浏览器（Chrome for Android、Safari iOS、Firefox Mobile）完全遵循 CSS 渲染规范：opacity 作用于整个 painting box，包括背景、边框、文字、所有后代节点。它不是“样式继承”，而是底层 Alpha 混合操作：最终像素 = 父层 × 子层。哪怕子元素写了 opacity: 1，也只是在已衰减的画布上重绘一次，视觉上仍是父级透明度值。
常见现象包括：
- 文字对比度骤降，尤其在浅色背景上显得灰蒙蒙
- 按钮图标边缘模糊、点击反馈变弱
- 调试时看到
color的 computed value 显示为rgba(0, 0, 0, 0.4)，但源码里明明是#000
用 rgba() 替换 background-color 是最稳解法
只让背景透，文字、图片、表单控件等子元素保持 100% 不透明，无需改 HTML 结构，兼容性覆盖所有主流移动浏览器（iOS 9+、Android Chrome 42+）。
立即学习“前端免费学习笔记（深入）”；
实操建议：
- 把
background-color: #000; opacity: 0.6;改成background-color: rgba(0, 0, 0, 0.6); - 渐变中需要透明段，用
transparent而非rgba(0,0,0,0)，避免 Safari iOS 旧版本误解析为黑色 - 边框或文字要局部半透？直接写
border-color: rgba(100, 100, 100, 0.3)或color: rgba(0, 0, 0, 0.8) - 别加
!important：alpha 值本身已具声明优先级，冗余写法反而干扰后续变量管理
遇到图片背景或 backdrop-filter 时，用伪元素隔离
当背景是 background-image + backdrop-filter: blur(6px) + 半透叠加（比如毛玻璃效果），rgba() 直接写在 background 上会失效或行为不一致。这时伪元素才是可靠方案。
关键步骤：
- 父容器加
position: relative -
.container::before设position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.35); z-index: -1; - 确保真实内容的
z-index> 0，且不设opacity或filter: opacity() - 伪元素默认不占文档流，但必须显式设置宽高才能完整覆盖
排查“没写 opacity 却发灰”的真正源头
很多移动端问题不是出在当前元素，而是某个祖先节点（比如 .modal-overlay、body 的 wrapper、甚至根 <div id="app">）悄悄加了 <code>opacity 或 backdrop-filter。这种影响是穿透式的，Inspector 里不会高亮显示，必须手动逐层点开 computed styles，重点盯住 opacity 和 filter 两栏的生效值。
真正难的不是怎么修，而是得先找到那个藏在 DOM 树深处、连 class 名都看不出端倪的“透明源”。
