应使用 background-color: rgba() 而非 opacity：前者仅使背景色透明，文字等子元素保持清晰；后者会使整个元素及所有子元素（文字、图片等）统一变淡且无法通过子元素 opacity: 1 恢复，因属渲染层 alpha 混合而非继承。
用 background-color: rgba() 而不是 opacity
直接给父容器加 opacity: 0.5 是最常见错误：它会让整个元素及其所有子元素（包括文字、按钮、图片）一起变淡，且无法通过给子元素设 opacity: 1 拉回来——这不是继承，是渲染层混合，子元素的 opacity 设置完全无效。
正确做法是只让「背景色」带透明度，其他内容保持原样。核心就是用 rgba() 替代纯 rgb() 或十六进制颜色值：
-
background-color: rgba(0, 0, 0, 0.4)→ 黑色背景，40% 透明度，文字照常清晰 -
background-color: rgba(255, 255, 255, 0.8)→ 白色背景，80% 不透明，适合深色文字覆盖 - alpha 值范围是
0（全透）到1（不透），支持小数如.2、.75，可省略前导零
background 简写中混用 rgba 需注意顺序
如果用 background 简写属性（比如同时设背景色和背景图），rgba 必须放在最前面，否则会被后续声明覆盖：
/* ✅ 正确：rgba 作为 background-color 优先生效 */
div {
background: rgba(0, 0, 0, 0.3) url("bg.jpg") center/cover;
}
<p>/<em> ❌ 错误：url() 在前，rgba 被当作文本色或忽略 </em>/
div {
background: url("bg.jpg") center/cover, rgba(0, 0, 0, 0.3);
}更稳妥的做法是拆开写：background-color: rgba(...) + background-image: url(...)，避免简写歧义。
立即学习“前端免费学习笔记（深入）”；
IE8 及以下必须用 filter 回退
IE8 不支持 rgba，但项目若仍需兼容，可用微软私有滤镜：
filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#66000000, endcolorstr=#66000000);- 其中
#66000000是 ARGB 格式：前两位66表示 alpha（十六进制，00=全透，FF=不透），后六位是 RGB - 必须配合
zoom: 1或position: relative触发 hasLayout，否则在 IE6/7 中不生效
现代项目基本可忽略此条，但老系统维护时容易卡在这里——不是写错了，是漏了触发 layout 的 hack。
背景图半透明？别碰 opacity，用伪元素或渐变叠加
如果目标是「背景图」半透明（而非纯色背景），rgba 本身不适用，因为图片没有 color channel。此时真正有效的方案只有两个：
- 用伪元素
::before单独承载图片并设opacity，内容层绝对定位在上层 - 用
background多层叠加：先写一个linear-gradient(rgba(...), rgba(...))作为蒙版层，再写url(...)图片层
这两者都绕开了对容器整体设 opacity，确保文字、表单控件等交互元素始终可读、可点击。实际调试时，打开浏览器开发者工具检查元素层级和渲染层，比猜更可靠。
