直接用 background-color: rgba() 设置按钮背景色，alpha 值必须为 0–1 小数（如 0.3），不可用百分比或整数；它仅作用于背景，不干扰文字和边框清晰度，而 opacity 会令整个按钮及其内容发虚、可读性下降。
直接用 background-color: rgba() 设置按钮背景色，Alpha 值控制半透程度；别碰 opacity，它会让文字、边框一起发虚。
button 的 background-color 用 rgba() 最稳妥
这是最常用、语义清晰、兼容性好（IE9+）的做法：只改背景，不碰文字和边框。
-
rgba(0, 0, 0, 0.3)表示黑色背景，30% 不透明（即 70% 透明），文字仍 100% 清晰 - Alpha 参数必须是 0–1 的小数，不是百分比（
0.3✅，30%❌） - 如果同时设了
background-image，background-color: rgba()必须写在后面，否则会被覆盖 - 按钮有
border时，rgba()不影响边框颜色——边框可单独用border-color: rgba()控制透明度
为什么不能用 opacity 给 button 设半透明
opacity 是“全元素级”开关，一开就全家变淡，对按钮这种交互控件尤其危险。
-
opacity: 0.6后，文字灰蒙蒙、图标边缘糊、hover 状态难识别 - 点击区域视觉反馈弱，用户无法判断是否悬停或已按下
- 若按钮内含 SVG 或 icon font，它们也会同比例变淡，可能完全不可读
- 无法通过子元素设
opacity: 1拉回来——opacity 不叠加，但会嵌套衰减
需要带背景图的半透明按钮？用伪元素隔离 opacity
当按钮要叠加图片（比如渐变纹理、品牌底纹）且需整体压暗/提亮时，rgba() 不够用，得拆层。
- 把图片设为
button::before的background-image，再配opacity: 0.4 - 按钮本身设
position: relative，伪元素用position: absolute撑满 - 文字和边框仍在主元素上，不受伪元素 opacity 影响
- 注意：伪元素必须有
content: ""，否则不渲染
兼容老浏览器（如 IE8）？优先放弃，否则 fallback 要绕弯
现代项目基本不用管 IE8，强行支持反而增加维护成本和潜在 bug。
- IE8 完全忽略
rgba()，按钮变成无背景色（即纯透明），可能看不见 - 若真要兜底，可用
filter: progid:DXImageTransform.Microsoft.gradient(...)模拟单色半透，但仅 IE 有效，其他浏览器无视 - 更现实的做法：给 IE8 用户一个 solid 背景色（如
background-color: #ccc），再加一条background-color: rgba(...)覆盖 - 所有 fallback 都无法真正模拟 alpha 通道——那是渲染层的事，CSS 里没捷径
真正容易被忽略的是：半透明按钮在深色/浅色背景下对比度变化极大，rgba(0,0,0,0.2) 在白底上几乎看不见，在黑底上又太跳。务必在真实上下文中测试可读性和点击意愿。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
