如何在 CSS 中正确加载本地 JPG 背景图片

本文详解 HTML 页面中 CSS background-image 无法加载 JPG 图片的常见原因及规范写法，涵盖路径写法、属性拆分、响应式适配等关键要点，并提供可直接运行的修复示例。 本文详解 html 页面中 css `background-image` 无法加载 jpg 图片的常见原因及规范写法，涵盖路径写法、属性拆分、响应式适配等关键要点，并提供可直接运行的修复示例。在 Web 开发中，使用 CSS 设置背景图片（如 telahome2.jpg）却无法显示，是初学者高频遇到的问题。根本原因往往并非图片损坏或服务器异常，而是 CSS 语法不规范、路径解析错误或背景属性混用不当所致。以下从实践角度系统梳理解决方案。? 正确的 CSS 背景图片写法首先，避免将多个背景相关属性合并到 background 简写中（如 background: url(...) no-repeat top center）。这种写法虽看似简洁，但极易因顺序、遗漏值或浏览器默认行为导致意外覆盖（例如 background 会重置 background-size 和 background-attachment 等未显式声明的属性）。推荐采用分项声明方式，语义清晰、可控性强：body { width: 100vw; height: 100vh; margin: 0; padding: 0; background-image: url(/telahome2.jpg); /* 绝对路径：从网站根目录开始 */ background-position: center; /* 替代 'top center'，更明确居中 */ background-repeat: no-repeat; background-size: cover; /* 确保图片铺满容器且不失真 */ background-attachment: fixed; /* 可选：实现视差滚动效果 */}? 路径说明：url(/telahome2.jpg) 中的 / 表示网站根目录（即与 HOME.HTML 同级的文件位置）。若图片与 HTML 文件同在根目录下，此写法最可靠；若图片位于子文件夹（如 images/），则应写为 url(/images/telahome2.jpg)。切勿使用相对路径 url(telahome2.jpg)（易受当前 CSS 引入方式影响）或错误路径 url('./telahome2.jpg')（在 <style> 标签内无效）。立即学习"前端免费学习笔记（深入）"； arXiv Xplorer ArXiv 语义搜索引擎，帮您快速轻松的查找，保存和下载arXiv文章。