应使用background-color: rgba()而非opacity实现按钮背景透明，因opacity会使整个元素及子节点（含文字、图标）同步变淡，而rgba()仅作用于指定颜色属性，可保持文字清晰可读。
button上直接用opacity会连文字一起变透明
给<button>加opacity: 0.4确实最简，但文字、边框、图标全跟着变淡——这不是“按钮透明”，是“整个按钮糊成一片”。常见于想做悬浮按钮或玻璃态效果时，结果文字看不清、点击反馈弱。
关键点：opacity作用于整个元素及其所有子节点，无法单独提亮文字。如果你的按钮里有<span>或<svg>，它们也会被乘上同一系数（比如0.4 × 1 = 0.4）。
- 别写
opacity: 40%——CSS不认百分比，只接受0.0–1.0小数 - IE8及更早需
filter: alpha(opacity=40)，但现在基本不用考虑 -
opacity: 0的按钮仍可点击，除非额外加pointer-events: none
只想背景透明？改用background-color: rgba()
这是最常用也最安全的方案：按钮背景半透，文字和边框保持原样清晰。例如background-color: rgba(0, 0, 0, 0.2)，让按钮像蒙了层薄雾，但文字锐利可读。
注意rgba()只影响你指定的那个颜色属性——设在background-color上，就只动背景；设在color上，就只动文字颜色透明度。
立即学习“前端免费学习笔记（深入）”；
- 红绿蓝分量用
0–255整数，alpha通道用0.0–1.0小数 - 不要混用：比如
background-color: #000; opacity: 0.2会导致灰黑底+模糊字，不是通透感 - 若按钮有边框，记得同步设
border-color: rgba(0,0,0,0.2)来匹配层次
需要圆角+透明+阴影？opacity不是首选
透明圆角按钮常配border-radius和box-shadow，但用opacity会把阴影也变淡，削弱立体感。此时应优先用rgba()控背景，再单独调阴影透明度：
background-color: rgba(255, 255, 255, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
这样背景轻、阴影稳，视觉更有纵深。如果硬上opacity: 0.3，阴影会发虚，尤其在深色背景下几乎消失。
-
opacity动画（如hover淡入）性能好，因为走GPU加速 - 但静态透明效果，
rgba()更可控、更易调试 - 切记：
border-radius本身不影响透明度，但圆角边缘在低opacity下可能显锯齿，此时需检查父容器是否触发了硬件加速（加transform: translateZ(0)有时能缓解）
为什么opacity: 1写在<span>里没用？
这是最容易卡住人的点：你在<button style="opacity: 0.4"><span style="opacity: 1">点我</span></button>里写opacity: 1，文字依然半透。因为透明度是逐层相乘的——父级0.4 × 子级 1 = 0.4。
想突破这个限制，唯一办法是不让文字成为<button>的子元素。比如用伪元素::after盖文字，或把文字抽到同级绝对定位层——但这会破坏语义和可访问性，慎用。
真正该做的，是放弃“用opacity调局部”的思路，回到rgba()打底 + 文字默认不透明的正向逻辑。
