background-color: rgba() 是唯一能实现按钮背景半透明而文字不透明的方案；opacity 会让文字、边框、图标全发虚，不可逆，因其作用于整个渲染节点，强制整块元素（含子元素）进入同一合成层做 alpha 混合，导致文字退化为灰度抗锯齿而变软发虚。
background-color: rgba() 是唯一能实现按钮背景半透明而文字不透明的方案；opacity 会让文字、边框、图标全发虚，不可逆。
为什么 button 上用 opacity 文字就糊了
因为 opacity 作用于整个渲染节点——按钮里哪怕只有一行文字，它也和背景、边框、伪元素（如 ::before）一起被降级合成。你写 opacity: 0.8，浏览器不是“调背景”，而是把整个 button 输出层叠后统一压一层 alpha 通道。子元素设 opacity: 1 无效，视觉上依然透。
- 常见现象：按钮 hover 后文字边缘变软、图标颜色变淡、点击反馈弱
- 调试技巧：在开发者工具里逐层检查祖先元素，90% 的“按钮文字看不清”都来自父容器遗留的
opacity - 性能影响：
opacity触发新层叠上下文，和transform或filter连用时容易意外创建额外图层，滚动或动画中掉帧
background-color: rgba() 的正确写法
把透明度“钉死”在背景色里，文字、边框、内边距、子元素全不受影响。这是现代项目里最稳的选择。
- 必须写全属性：
background-color: rgba(255, 255, 255, 0.85)，不能只写rgba(255, 255, 255, 0.85)或background: rgba(...)—— 后者可能被忽略 - 第四个参数是 0–1 小数，不是百分比：
0.85≠85%，别写成rgba(0,0,0,50) - 深色背景配浅字时，alpha 建议 ≥ 0.8；纯黑底上白字，
rgba(255, 255, 255, 0.92)是较安全起点 - IE8 不支持
rgba()，若真要兼容，得加 fallback：background-color: #ffffff; background-color: rgba(255, 255, 255, 0.92);
按钮带图标或伪元素时怎么保文字清晰
如果按钮里有 <i class="icon"></i> 或用了 ::after 插入装饰符号，opacity 会让它们一起变淡；而 rgba() 只动背景，图标和文字仍可独立控制颜色与不透明度。
- 边框透明？用
border-color: rgba(0, 0, 0, 0.3)，别碰opacity - 需要毛玻璃效果？用伪元素：
button { position: relative; } button::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); z-index: -1; } - 注意：
::before必须有content: ""，否则不渲染；inset: 0比top/left/right/bottom: 0更简洁可靠
真正难的不是写对那行 rgba()，而是意识到：只要文字和背景共处同一个 DOM 节点，就永远绕不开透明度污染。拆结构（比如用伪元素隔离背景层）比硬调参数更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
