首选 background-image 而非 ，因其语义正确、轻量可控；需设容器 min-height: 100vh、background-size: cover、background-position: center center，并清空父级 margin/padding 干扰。

全屏背景图用 background-image 还是 <img>？

直接用 <img> 做全屏背景图会破坏语义、增加 dom 复杂度，且难以与遮罩层对齐；background-image 更轻量、可控性强，是首选方案。bootstrap 本身不提供“全屏背景图组件”，但可借助其栅格和工具类快速实现。

关键点：容器必须设为 height: 100vh（而非 100%），否则高度塌陷；同时需确保父级（如 、）无 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;"> <li>避免在 <code> 上直接设 background-image——它无法叠加伪元素遮罩，也不易控制层级
• 若用 Sass 编译 Bootstrap，推荐将背景图路径写入变量，便于统一管理

遮罩层用 ::before 还是独立 <div>？ <p>用伪元素 <code>::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 锚定主体区域。


VPS Bootstrap
从零启动全新 VPS，完成 OpenClaw 完整部署，包括备份/恢复及恢复后验证。用于 OpenClaw 部署。
下载

例如人物居中时，用 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
实际做下来，最难的不是写几行 CSS，而是反复在不同设备截图比对背景裁切位置和文字可读性。尤其当设计师给的图是 4K 横幅，而用户手机是 9:16，这时候靠代码自动适配几乎不可能，得预留人工微调入口。