如何将index.html页面设置为全屏背景图片？

本文共计838个文字，预计阅读时间需要4分钟。

直接在 index. 的 body 标签内添加以下内容：

常见错误是只写 background-size: 100% 100%，这会强制拉伸变形；或漏掉 background-repeat: no-repeat 和 background-position: center，导致平铺或偏移。

• html 和 body 都要设 height: 100%，否则 body 高度可能仅由内容撑开，背景图只显示一部分
• 推荐把背景设在 html 上，避免滚动条遮挡或 margin 干扰
• 加 background-attachment: fixed 可实现视差效果，但注意 iOS Safari 对该属性支持不稳定，滚动可能卡顿

为什么不能只靠 <img> 标签 + width: 100vw; height: 100vh？

有人会用 <img src="bg.jpg" style="width: 100vw; height: 100vh;"> 直接塞进 HTML，看似简单，实际问题不少：

• 图片默认是行内元素，有底部空白（baseline 空隙），需加 display: block 或 vertical-align: top
• 100vh 在移动端（尤其 Safari）可能包含地址栏高度，缩放后出现滚动条或截断
• 无法自动裁剪适配不同宽高比屏幕，容易留白或过度裁切
• 语义错误：背景图不是内容型图片，不该用 <img>，影响可访问性和 SEO

处理移动端 Safari 的 100vh 和 fixed 背景失效问题

iOS Safari 对视口单位和固定背景支持较弱，尤其在地址栏收起/展开时 vh 值会跳变，background-attachment: fixed 也可能完全不生效。

立即学习“前端免费学习笔记（深入）”；

• 用 JavaScript 动态设置高度：document.documentElement.style.setProperty('--vh', window.innerHeight * 0.01 + 'px')，然后 CSS 中用 height: calc(var(--vh, 1vh) * 100)
• 放弃 fixed，改用 background-attachment: scroll + background-position: center / cover，视觉差异不大但更稳
• 如果必须高清覆盖，可配合 @supports (aspect-ratio: 1/1) 做渐进增强，但目前兼容性仍有限

图片加载前的白屏或闪烁怎么避免？

背景图异步加载时，页面先渲染无背景的 body，等图片加载完才显示，造成明显闪烁。这不是 CSS 能单独解决的。

• 给 body 设一个与背景图主色调接近的 background-color，比如 #2c3e50，降低对比突兀感
• 使用内联 SVG 占位：background-image: url("data:image/svg+xml,%3Csvg ... %3E"), url(bg.jpg)，确保 fallback 有基础图形
• 关键背景图建议用 <link rel="preload"> 提前加载：<link rel="preload" href="bg.jpg" as="image">

真正难的不是写对那几行 CSS，而是得同时应付不同设备的视口计算逻辑、加载时机、以及用户滚动时的渲染表现。尤其是 iOS 上那个忽大忽小的 vh，光靠 CSS 常量根本压不住。