如何将图片设置为index.html页面背景，提升视觉美感？

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

直接在 `` 或 `` 元素上设置 `background-image` 是最常用且最可靠的方式。不要使用 `background` 属性。

实操建议：

• 把图片放在 ./images/bg.jpg 这类明确路径下，CSS 中写相对路径：background-image: url('./images/bg.jpg');
• 必须配 background-size: cover;，否则小图重复平铺、大图只显示左上角，都很糟心
• 加上 background-attachment: fixed; 可实现视差滚动效果，但注意 iOS Safari 和部分安卓浏览器不支持或有性能问题
• 记得设 background-color 作降级色，等图加载时不会白屏

避免 body 高度塌陷导致背景图不显示

常见现象：写了背景图，但只在首屏高度显示，往下滚动就变白。这是因为 body 默认高度由内容撑开，没内容时高度为 0 —— 背景自然没地方画。

解决方法（二选一）：

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

• 给 html 和 body 同时设 height: 100%;，再给 body 加 min-height: 100vh;
• 更稳妥的做法：只对 body 设 min-height: 100vh;，不碰 html 的 height，兼容性更好

background-position 怎么调才不切头切脸

用 cover 时图片会被缩放裁剪，background-position 决定裁哪一块。默认 center center 适合构图居中的图；如果人物偏左，背景里人被切掉半张脸，就该调位置。

常用值和效果：

• center top：保留顶部内容，适合有天空/标题区域的图
• left center 或 right center：把主体往左/右拉，避免居中构图被裁
• 用像素值如 20px 10px 微调，但响应式下容易失效，慎用

图片加载慢？加个 loading 占位或渐显过渡

背景图是 CSS 触发的，浏览器不会触发 load 事件，没法像 <img> 那样监听。所以“加载中”状态得靠别的办法。

实用方案：

• 内联一个 base64 小尺寸模糊图做 background-image，再用媒体查询或 JS 换成高清图
• 用 background-image 叠两层：linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url(...)，既压暗图提升文字可读性，又让加载过程不突兀
• 真要 JS 控制，可用 image.onload 加载一张隐藏 <img>，再改 body class 触发 CSS 过渡，比如 body.loading { opacity: 0.5; }

真正难的不是设上背景，而是让不同尺寸屏幕、不同网速、不同设备都看起来自然。图的构图、压缩质量、fallback 颜色，每个细节都会在某个用户那里暴露出来。