最稳妥的背景透明方案是用 rgba() 而非 opacity；rgba() 仅影响背景色透明度，opacity 会使整个元素及子元素同步变透明，易导致文字不清等问题。
background-color 用 rgba() 设置背景透明度
直接改 background-color 的透明度，最稳妥的方式是用 rgba() 函数，而不是靠 opacity 全局压低整个元素。后者会让文字、子元素一起变透明，通常不是你想要的。
常见错误现象：opacity: 0.5 加上去后，按钮文字也看不清了，或者弹窗里的输入框变灰难操作。
-
rgba(255, 255, 255, 0.8)表示白色背景，80% 不透明（即 20% 透明） - 第四个参数是 alpha 值，范围是
0（全透明）到1（不透明），不能写成百分比或整数 - IE9 及更早版本不支持
rgba()，如果必须兼容，得配filter: progid:DXImageTransform.Microsoft.gradient(...)（但基本不用了）
opacity 影响整个元素及其所有子节点
如果你真想让整个盒子（含文字、图标、子 div）一起淡出，才用 opacity。它作用于渲染层，不是颜色本身。
使用场景：模态框遮罩层淡入、卡片悬停时整体虚化、加载动画渐隐。
立即学习“前端免费学习笔记（深入）”；
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
-
opacity值为0时元素仍占布局空间，只是看不见；要彻底移除得配合visibility: hidden或display: none - 设为
opacity: 0.3后，里面所有文本、SVG、图片都会同步变淡，无法单独调亮文字 - 性能上几乎无负担，但过度嵌套使用可能触发额外合成层，一般不用管
半透明背景 + 不透明文字的组合写法
这是最常见的需求：灰色蒙版盖在图上，上面放白字，字不能透底。核心是别让文字继承父级透明度。
正确做法是把背景和内容拆成两个独立元素，或用伪元素画背景。
- 给容器设
position: relative，再用::before伪元素画一层rgba()背景，z-index设低 - 文字层保持默认
opacity: 1，不受影响 - 避免写成
div { background: rgba(...); color: white; opacity: 0.9; }—— 这样字也会发灰
div {
position: relative;
}
div::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-color: rgba(0, 0, 0, 0.4);
z-index: -1;
}
transparent 和 currentColor 不能直接控制透明度
transparent 是个固定关键字，等价于 rgba(0,0,0,0)，它本身没有“程度”可调；currentColor 是取当前文字色，也不带 alpha。
容易踩的坑：有人以为 background-color: transparent 可以配合其他属性调透明，其实它只是“啥也不画”，后面元素会直接透出来，和透明度控制无关。
- 不要写
background-color: transparent; opacity: 0.5来“增强透明”，这等于把整个元素变淡，又回到上一个问题 - 想动态控制透明度，只能通过 JS 改
style.backgroundColor的rgba()字符串，或切换 CSS 变量（如--bg-alpha: 0.7） - CSS 自定义属性 +
rgba()在现代项目里更灵活，但注意 Safari 旧版本对变量内插值支持不稳定
rgba()、opacity，还是 background-image 配透明 PNG。别一上来就堆 opacity。 
