opacity会使整个元素及子元素一同变透明，无法单独控制背景或文字；正确做法是用rgba()设置背景色实现仅背景透明，或用伪元素+opacity模拟半透背景层。
opacity 会让整个元素及其子元素一起变透明
设置 opacity 时，浏览器会把整个元素（包括文字、子节点、边框等）当作一个整体做透明度混合，无法单独控制背景或文字。这是 CSS 渲染模型决定的，不是 bug，但常被误用。
常见错误现象：opacity: 0.6 后发现按钮文字看不清、图标发虚、嵌套卡片内容全变淡——所有子元素都继承了父级的透明度。
-
opacity是作用于整个渲染层的，不可被子元素取消或覆盖 - 即使给子元素设
opacity: 1，它仍处于父级的半透明容器中，视觉上仍是透明的 - 用
opacity做“仅背景透明”是无效路径，必须换思路
用 rgba() 设置背景色实现“仅背景透明”
真正可控的方式是把透明度“下沉”到颜色本身：用 rgba() 替代 background-color: #fff 这类纯色写法，让透明只作用于背景，不影响文字和子元素。
示例对比：
立即学习“前端免费学习笔记（深入）”；
/* ❌ 错误：文字也被透明化 */
.card {
background-color: #ffffff;
opacity: 0.8;
}
<p>/<em> ✅ 正确：仅背景带透明，文字保持 100% 不透明 </em>/
.card {
background-color: rgba(255, 255, 255, 0.8);
}注意：rgba() 的第四个参数是 alpha 值（0–1），和 opacity 数值意义相同，但作用域完全不同。
-
rgba(0, 0, 0, 0.5)= 半透黑色背景，文字照常清晰 - 支持所有 CSS 背景相关属性，如
border-color: rgba(0,0,0,0.1) - 不触发新层叠上下文（而
opacity < 1会），避免意外的 z-index 行为
遇到渐变背景或图片时怎么处理
如果背景不是纯色而是 linear-gradient 或 url()，不能直接套 rgba()，需改用 background 复合写法 + 半透遮罩层。
推荐方案：用伪元素或额外容器模拟“背景层”，并对其单独应用透明度：
.card {
position: relative;
}
.card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
opacity: 0.7; /* ✅ 这里可以放心用 opacity，因为它是独立层 */
z-index: -1;
}关键点：
- 伪元素或遮罩层必须脱离文档流（
position: absolute）且置于底层（z-index: -1） - 主内容区域（文字、按钮等）保持在默认层，完全不受影响
- 避免对包含文字的容器本身设
opacity，哪怕只是临时调试
兼容性与 fallback 注意事项
rgba() 在 IE9+、所有现代浏览器中均支持；IE8 及更早版本不支持，但这类环境现在极少需要适配。若真有强制兼容要求，可用 filter: progid:DXImageTransform.Microsoft.gradient（已废弃，不建议投入维护）。
更实用的 fallback 写法（渐进增强）：
.card {
background-color: #ffffff; /* IE8 及以下看到纯白 */
background-color: rgba(255, 255, 255, 0.8); /* 现代浏览器覆盖 */
}注意顺序：CSS 解析是从上到下，后声明的同名属性会覆盖前一个，所以 rgba() 必须写在传统色值之后。
真正容易被忽略的是：当使用 CSS 预处理器（如 Sass）生成颜色变量时，别直接把 $color: #fff 套进 opacity 函数——应统一转成 rgba($r, $g, $b, $alpha) 形式输出，否则又绕回老问题。
