应使用 background-color: rgba() 实现背景透明而文字清晰，避免 opacity 导致全元素变淡；rgba() 需单独声明，IE9+支持；背景图/渐变需用伪元素分层控制；复杂场景可改用绝对定位兄弟元素解耦透明度。
直接用 background-color: rgba() 替代 opacity
这是最简单、最安全、也最不容易出错的方式。只要你想让“背景变透明，文字和子元素保持清晰”，就别碰 opacity —— 它会让整个渲染树一起变淡，包括文字、图标、按钮、表单控件，而且子元素设 opacity: 1 也完全无效。
正确写法是：
.card {
background-color: rgba(255, 255, 255, 0.8); /* 白底 80% 不透明（即 20% 透明） */
color: #333;
}
.card h2,
.card p {
/* 不用额外处理：文字、子元素天然不透明 */
}-
rgba()的第四个参数必须是0–1的小数，不能写80%或200 - 必须用
background-color单独声明；如果前面用了background: #fff这类简写，会把 alpha 值清掉，DevTools 里能看到该行被划掉 - IE9+、所有现代浏览器都原生支持；若真要兼容 IE8，加 fallback：
background-color: #fff;+ 下一行background-color: rgba(255,255,255,0.8);
背景图或渐变需要半透明？用伪元素分层
rgba() 对 background-image 和 linear-gradient() 无效。想让图片“压暗”但文字仍锐利，只能把背景图挪到伪元素上，再单独控制它的透明度。
关键点：
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，否则伪元素会相对 body 定位 - 伪元素用
::before或::after，content: ""+position: absolute+z-index: -1 - 伪元素的
opacity可以独立设置（推荐 0.2–0.7 区间） - 如果父容器有
border-radius，伪元素也得同步加，否则圆角边缘会漏出底层内容
别踩这些坑
常见错误不是不会写，而是改着改着把原本正常的部分搞崩了：
-
background: rgba(0,0,0,0.5)—— ❌ 错。这会清空已设的background-image或background-repeat，应只用background-color -
opacity: 0.4后给子元素加!important—— ❌ 无效。透明度是乘法叠加，不是继承覆盖 - 在已有
overflow: hidden的父容器里用rgba()+border-radius—— ⚠️ 旧版 Safari 可能出现背景色溢出圆角，临时绕过可加transform: translateZ(0)，但更稳的是把border-radius移到外层容器 - 用
filter: opacity(0.4)—— ❌ 行为等同opacity，且可能触发重绘性能问题
复杂场景：子元素视觉上要“嵌套”，但 DOM 必须是兄弟
当设计稿明确要求一个半透明卡片里放一个完全不透明的按钮，且这个按钮还带阴影、hover 动画、焦点状态——这时候硬拆成兄弟元素再绝对定位，反而比伪元素更可控。
做法是：
- 用一个
position: relative的 wrapper 包住两个兄弟元素 - “卡片”和“按钮”都设
position: absolute，用top/left对齐位置 - 卡片设
opacity: 0.6，按钮设opacity: 1—— 此时它们互不影响 - 注意 z-index 层级，确保按钮在卡片上方
这不是“hack”，而是面对 opacity 渲染机制的合理妥协：它本质就是个堆栈滤镜，没法局部关闭。你得接受——想彻底解耦透明度，就得松动 DOM 层级关系。
