首选 background-image 而非 <img>，因其语义正确、轻量可控；需设容器 min-height: 100vh、background-size: cover、background-position: center center，并清空父级 margin/padding 干扰。
全屏背景图用 background-image 还是 <img>？
直接用 <img> 做全屏背景图会破坏语义、增加 dom 复杂度，且难以与遮罩层对齐；background-image 更轻量、可控性强，是首选方案。bootstrap 本身不提供“全屏背景图组件”，但可借助其栅格和工具类快速实现。
关键点：容器必须设为 height: 100vh（而非 100%），否则高度塌陷；同时需确保父级（如 <body>、<html>）无 margin/padding 干扰。
<div class="hero-bg d-flex align-items-center justify-content-center" style="height: 100vh; background-image: url('bg.jpg'); background-size: cover; background-position: center;">- 避免在
<body>上直接设background-image——它无法叠加伪元素遮罩，也不易控制层级 - 若用 Sass 编译 Bootstrap，推荐将背景图路径写入变量，便于统一管理
遮罩层用 ::before 还是独立 <div>？
用伪元素 ::before 最简洁：无需额外标签、不干扰可访问性、CSS 层级清晰。但要注意 z-index 和定位上下文。
常见错误：position: relative 没加在父容器上，导致 ::before 脱离预期范围；或忘记设 content: ""，伪元素不渲染。
- 父容器必须有
position: relative ::before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 1; }- 内容区域（如标题、按钮）需设
z-index: 2才能浮在遮罩之上 - 不要用
opacity给整个容器降透明度——它会让内容也变透明
响应式下背景图裁切错位怎么办？
background-size: cover 在小屏竖屏设备上常把关键内容（如人脸）切掉，这不是 Bug，是它的设计行为。解决思路不是禁用 cover，而是用 background-position 锚定主体区域。
例如人物居中时，用 background-position: center 30% 把焦点上移；文字在底部时，可配合 @media 单独调整断点值。
- 慎用
background-size: contain——它留白多，遮罩层会暴露底色 - Bootstrap 的
min-vh-100类可替代手写height: 100vh，但它不处理背景图定位逻辑 - 真要兼容 iOS Safari，需加
background-attachment: scroll（默认值），避免fixed导致渲染异常
遮罩文字看不清？检查这几个 CSS 层级陷阱
最常被忽略的是文字颜色和遮罩透明度的组合效果。比如 rgba(0,0,0,0.7) + 白字，在暗图上没问题，换到亮图上就糊成一片。
别只调遮罩 opacity，优先用 filter: brightness() 或叠加双层遮罩（一层深色+一层浅色）来提升对比容错率。
- 文字务必设
color: #fff显式声明，别依赖继承 - 用
text-shadow: 0 2px 4px rgba(0,0,0,0.3)强化可读性，比单纯加粗更有效 - 如果用了 Bootstrap 的
text-white类，确认它没被其他样式覆盖（检查 computed styles） - 移动端触摸时，遮罩层不能拦截点击——确保内容区域有
pointer-events: auto
