应使用background-color: rgba()设置背景透明度，因其仅作用于背景色且不影响子元素；rgba()的alpha值为0–1小数（如0.5），非百分比或整数，错误写法如rgba(0,0,0,50%)将被浏览器忽略。
直接用 background-color: rgba() 调背景透明度，别碰 opacity
想让一个元素的背景变半透，但文字和子元素保持不透明？opacity 会把整个元素（包括内容）一起变淡，这是它最常被误用的地方。真正该用的是 rgba() 或 hsla() 直接设在 background-color 上——只影响背景色本身，不影响子元素渲染。
rgba() 的第四个参数不是百分比，是 0–1 的小数
写 rgba(0, 0, 0, 0.5) 表示 50% 不透明（即 50% 透明），不是 50 或 50%。常见错误包括：
- 写成
rgba(0, 0, 0, 50%)→ 浏览器直接忽略该声明 - 写成
rgba(0, 0, 0, 50)→ 无效值，降级为transparent或 fallback 颜色 - 用十六进制 + 透明度（如
#0008）虽在现代浏览器支持，但 IE 完全不认，rgba()兼容性更稳（IE9+）
opacity 会连带子元素一起变透明，且无法被子元素“覆盖”回来
即使你在子元素里写 opacity: 1，也无效——因为 opacity 是继承式合成属性，父元素透明后，子元素只是“在更暗的图层上画得更亮”，视觉上依然发虚。典型场景踩坑：
- 弹窗背景用了
opacity: 0.7，结果按钮文字也模糊了 - 卡片加了
opacity做 hover 效果，图标和文字跟着一起淡出，可读性下降 - 用
opacity实现遮罩层时，内部表单控件点击区域变弱（尤其移动端）
需要兼容老浏览器？用 filter: alpha(opacity=50) 不如改用半透 PNG
IE8 及更早版本不支持 rgba()，但强行加 filter: alpha(opacity=50) 会触发 layout、可能引发 z-index 错乱或锯齿。更稳妥的做法：
- 为 IE8 单独提供一张 1px × 1px 的半透 PNG 作为
background-image - 用 Autoprefixer +
postcss-preset-env自动补rgba()fallback（对现代项目更实际） - 确认业务是否真需支持 IE8——2026 年多数系统已默认忽略
真正要调背景透明度，就锁定 background-color: rgba()；只有当你明确需要整块区域（含文字、图标、边框）统一淡化时，才考虑 opacity。后者本质是渲染层控制，前者才是语义正确的背景色表达——这点在调试盒模型时特别明显：rgba() 下 box-shadow 和 border 都清晰，opacity 下全都发灰。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
