前端如何竖屏固定视口背景

场景与痛点

在 Web 或 H5 开发中，我们经常遇到这样的需求：页面内容可以无限滚动，但背景图片必须像"贴膜"一样固定在屏幕视口中，不随内容滚动，也不因内容高度的改变而重新拉伸或定位。

直接使用 CSS 的 background 属性往往会遇到各种跨端或布局容器兼容性问题。

本方案提供了一套基于 <img> 标签结合固定定位的通用最佳实践。

核心实现代码

核心逻辑是抽离一个纯粹的背景层组件，

<div aria-hidden="true" class="pointer-events-none absolute inset-0 z-0 overflow-hidden">
  <img
    src="你的背景图路径"
    alt=""
    class="fixed left-1/2 top-0 block h-dvh w-full max-w-md -translate-x-1/2 select-none object-cover object-top"
  />
</div>

1. 彻底脱离文档流 (fixed top-0)

直接对图片使用 position: fixed 和 top: 0。这确保了背景图的参考系是当前的浏览器视口（Viewport），而不是包裹它的父元素或整个文档。即使页面再长，它也岿然不动。

2. 动态视口高度适配 (h-dvh + w-full)

使用现代 CSS 相对单位 dvh而不是 vh 或 100%。

优势 ：在移动端浏览器（如 Safari/Chrome）中，地址栏的显示与隐藏会改变实际视口高度。dvh 能够实时自适应，避免滚动时背景图底部出现跳动或被裁切的问题。

3. 完美覆盖与视点控制 (object-cover object-top)

object-cover 保证图片按比例缩放，铺满整个指定的尺寸范围内（不会变形）。

object-top 确保当屏幕比例与图片比例不一致发生裁切时，始终以图片的顶部为基准对齐。这对于大多数设计图（顶部元素最重要）来说是最佳选择。

4. 容器约束与居中对齐 (left-1/2 -translate-x-1/2 max-w-[具体宽度])

很多 H5 页面在 PC 端打开时，为了防止内容无限拉宽，外层会限制最大宽度并居中（例如 max-w-md mx-auto）。 如果背景图只是简单的 fixed w-full，它会铺满整个 PC 屏幕，导致背景和居中的页面内容错位。

解法 ：给背景图加上与页面主容器一致的最大宽度限制（如 max-w-md），并通过 left: 50% 和 transform: translateX(-50%) 让它在视口中绝对居中，完美对齐内容区。

5. 交互隔离 (pointer-events-none z-0)

作为纯视觉装饰，必须加上 pointer-events-none 消除所有鼠标/触摸事件，防止它阻挡下方内容的点击、滑动或文本选中（配合 select-none 体验更佳）。