应使用 background-color: rgba() 控制背景透明，避免 opacity 导致文字发虚；opacity 作用于整棵渲染树，子元素无法通过设 opacity: 1 恢复不透明；rgba() 将透明度限定在背景色内，文字、边框等不受影响。
直接用 background-color: rgba()，别碰 opacity —— 后者会让文字一起变灰，基本没法救。
为什么 opacity 一设文字就发虚？
opacity 不是“调背景”，它是整棵渲染树节点的 alpha 合成开关。设在父容器上，子元素哪怕写 opacity: 1，视觉上还是透的——因为合成发生在父级输出之后，子元素没机会“加回”不透明度。
- 常见现象：导航栏加了
opacity: 0.9，结果菜单文字模糊、按钮 hover 反馈变弱 - 调试技巧：用浏览器开发者工具检查祖先元素，90% 的“文字意外变透”都来自三层以上的
opacity遗留 - 兼容性陷阱：IE8 用
filter: alpha(opacity=90)，但同样全局生效，且会触发 hasLayout 导致布局错乱
rgba() 控制背景透明的实操要点
把透明度“钉死”在 background-color 属性里，文字、边框、子元素全都不受影响。这是现代项目里最稳的选择。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 写法必须是
background-color: rgba(255, 255, 255, 0.85)，第四个参数是 0–1 的小数，不是百分比（0.85≠85%） - 别混用：
background-color: #fff; opacity: 0.85是典型错误，等于主动把文字也拉进半透明队列 - 深色背景上用浅色文字时，alpha 值建议 ≥ 0.8；纯黑背景上放白字，
rgba(255, 255, 255, 0.92)是较安全的起点 - IE8 不支持
rgba()，若真要兼容，得配background-color: #ffffff+filter: alpha(opacity=92)（仅限块级元素）
需要毛玻璃或图片蒙版时，用伪元素隔离图层
当背景是 background-image，又想加透明遮罩且保文字清晰，不能直接给容器设 opacity 或改图片本身透明度——得把遮罩层从内容流里“摘出来”。
- 标准做法：容器设
position: relative，再用::before画一层background-color: rgba(0, 0, 0, 0.4)，z-index: -1 - 进阶需求（如毛玻璃）：把
filter: blur(4px)加在伪元素上，注意 iOS Safari 16.4+ 和 Chrome 111+ 才稳定支持 - 避坑点：伪元素必须有
content: ""，否则不渲染；position: absolute时记得设宽高或inset: 0覆盖全区域 - 滚动穿透风险：固定定位的透明导航盖在轮播图上时，确保轮播容器
z-index> 导航，否则 touch 事件可能被拦截
真正难的不是怎么写那行 rgba()，而是意识到：只要文字和背景共处同一个 DOM 节点，就永远绕不开透明度污染。拆结构比调参数更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
