<p>唯一可靠做法是用多层 background 声明，将 rgba() 遮罩写在 url() 图片前：background: rgba(0,0,0,0.4), url(/img/hero.jpg)，并显式设置 background-size: cover 和 background-position: center；需清除 .modal-content 等默认白色背景，文字颜色须手动指定，bg-opacity-* 类对图片无效，伪元素方案不推荐。</p>
直接用 background 多层叠加，别碰 opacity
给容器设 opacity: 0.7 是最常见错误——它会让图片、文字、按钮全变淡，根本不是“仅背景图透明”。真正要的是图片层本身带透明度，同时文字保持清晰。唯一可靠做法是把半透明遮罩（rgba()）和图片（url()）写进同一个 background 声明里，靠逗号分隔、顺序控制叠放关系。
- 遮罩必须写在图片前面：
background: rgba(0,0,0,0.4), url(/img/hero.jpg)，否则遮罩会被图片盖住 - 不能拆成
background-color+background-image，否则后者会覆盖前者 - 必须显式加
background-size: cover和background-position: center，否则图片可能只显示左上角一丁点 - 如果用了 Bootstrap 的
.card或.modal，先确认子容器没自带白色背景（比如.card-body），否则会挡住底层图片
遇到 .modal 或 .card 背景不生效？先清默认背景
Bootstrap 的 .modal-content 默认是纯白背景，直接在父容器上写 background 没用——图片被白色盖住了。得主动清掉这层干扰：
- 把
.modal-content的背景设为透明：background-color: transparent - 把多层
background写到.modal-dialog或外层div上，确保它在渲染层级上位于内容之前 - 文字颜色必须手动指定（比如
color: #fff），否则没了白色背景后黑字可能看不见 - 如果模态框有边框或阴影，顺手加
border: none和box-shadow: none避免视觉干扰
bg-opacity-* 类对背景图完全无效，别试
Bootstrap 5.2+ 的 bg-opacity-25 只作用于 background-color，且要求该颜色是 rgb() 或 rgba() 格式。它对 url() 图片背景零影响，也不会让图片变淡。试图混用 bg-primary bg-opacity-25 和背景图，结果只会是：图片照常显示，遮罩没出现，还多一层无效 class。
- 想控制图片透明度，只能靠
rgba()遮罩层 +url()图片层的组合写法 -
bg-opacity-*仅适用于纯色背景（如bg-light改成半透白），别指望它能“滤镜化”图片 - 若项目已用 Sass，可封装一个 mixin：
@mixin bg-image-alpha($url, $alpha) { background: rgba(0,0,0,$alpha), url(#{$url}); }，避免重复写
伪元素方案太重，现代项目里没必要
有人用 ::before 绝对定位盖一层 rgba() 遮罩，再调 z-index 控制层级。代码量翻倍、容易和 transform 冲突、还可能拦截点击事件。除非你卡在 IE10 必须兼容，否则纯属绕路。
- 多层
background是零额外 DOM、零 JS、无障碍友好的标准解法 - 伪元素一旦遇上
will-change或transform: scale()，极易触发新层叠上下文，导致遮罩错位 - 如果父容器高度塌陷（比如里面只有 floated 子元素），记得加
overflow: hidden或min-height，否则遮罩层会消失
