应使用 background 多层叠加实现图片背景透明而文字不透明：先写 rgba() 遮罩层，再写 url() 图片层，配合 background-size: cover 和 background-position: center；禁用 opacity 和伪元素方案。
用 background 多层叠加实现图片背景透明 + 文字不透明
直接给容器设 opacity: 0.7 是最常见错误——它会让文字、图标、子元素全变淡，根本不是你想要的“仅背景透”。真正该做的是：把半透明遮罩当成一层纯色背景，和图片背景叠在一起，靠渲染顺序控制谁在上、谁在下。
- 第一层（上层）是带 alpha 的
rgba()颜色，模拟遮罩；第二层（底层）才是url()图片 - 必须用
background属性一次性写完，不能拆成background-color+background-image，否则会覆盖 - 顺序不能错：逗号前的值在上层，遮罩必须写在图片前面
-
background-size: cover和background-position: center要显式声明，否则图片可能拉伸错位或只显示一角
div.hero {
background: rgba(255, 255, 255, 0.6), url(/img/hero.jpg);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
别用伪元素或额外 DOM 模拟遮罩
有人用 ::before 绝对定位盖一层半透明色，再调 opacity——代码多、z-index 容易乱、pointer-events 可能误拦截点击，还破坏语义结构。更麻烦的是，如果父容器有 transform 或 will-change，伪元素可能意外触发新层叠上下文，导致遮罩错位。
- 伪元素方案只在必须兼容老浏览器（如 IE10）且无法改 HTML 结构时才考虑
- 现代项目中，
background多层叠加是零额外节点、零 JS、无障碍友好的首选 - 如果用了 Bootstrap，注意它的
.modal-backdrop或.card类可能自带背景色，要检查是否被覆盖
遇到 Bootstrap 的 .modal 或 .card 怎么办
Bootstrap 的模态框默认背景是纯白+阴影，直接加 background: rgba(...), url(...) 往往无效——因为 .modal-content 本身有白色背景，会挡住底层图片。得先清掉它，再往上叠。
- 清除默认背景：
.modal-content { background-color: transparent; border: none; } - 把叠加背景加到
.modal-dialog或外层容器上，避免被子元素遮挡 - 文字颜色要手动设（比如
color: #fff），因为没了白色背景后，黑字可能看不清 - 慎用
filter: opacity()，它会影响整个元素及其子树，且在 Safari 中可能触发重绘抖动
兼容性与降级要点
rgba() 在 IE9+、所有现代浏览器都稳，但如果你真要支持 IE8，filter 是唯一选择，不过只适用于纯色背景，不适用于图片。
- IE8 下
background: rgba(0,0,0,0.4)会完全失效（显示为透明），需补一句：filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); -
#66000000中前两位66是十六进制 alpha（≈40% 不透明），后面六位是 RGB - 这个
filter会强制触发 hasLayout，可能让盒模型异常，别用在 flex 或 grid 容器里 - 真正该优先检查的，是设计稿里的“半透明”是不是本来就是一张带透明通道的 PNG——那种情况，直接换图比写 CSS 更省事也更可靠
background，而是确认设计师说的“背景透明”到底指哪一层：是底图？渐变？还是蒙版？没问清楚就硬套 rgba()，最后调半天才发现图本身带 alpha 通道，白忙活。
