如何将图片设置为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 —— 背景自然没地方画。