记事本写HTML加背景图需确保路径正确、保存为UTF-8编码、元素有高度。路径用相对路径如"bg.jpg"或"img/bg.jpg"，避免绝对路径和中文名；CSS写在内中；检查Network标签确认图片是否加载成功。
背景图片路径写错，浏览器根本不会加载
记事本本身没问题，问题全出在 background-image 的路径上。Windows 资源管理器里双击打开的 HTML 文件是用 file:// 协议运行的，不走服务器，所以所有路径都是相对于当前 HTML 文件位置算的。
常见错误：background-image: url("C:\Users\Me\Pictures\bg.jpg") —— 这种绝对路径在 Chrome/Firefox 里直接被拒绝，会报 Not allowed to load local resource 错误。
- 把图片和 HTML 文件放在同一个文件夹里，用相对路径：
url("bg.jpg") - 如果图片在子文件夹
img/下，写成：url("img/bg.jpg") - 路径区分大小写，
BG.JPG和bg.jpg是两个文件 - 中文路径、空格、括号（如
我的图片(1).jpg）容易出问题，尽量用英文+下划线命名
CSS 写在哪？内联还是 <style></style>？
记事本写 HTML，别碰外部 CSS 文件——多一个文件就多一步出错可能。直接用 <style></style> 块最稳。
别把样式写在 里用 属性，那样只能控制单个元素，且背景图必须作用在有宽高的块级元素上（比如 <div> 或 <code> 本身）。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：在
里加<style></style>，给body设背景：body { background-image: url("bg.jpg"); background-size: cover; } - 如果只希望某一块区域有背景，用
<div class="hero">，再在 <code><style></style>里写.hero { width: 100%; height: 400px; background-image: url("bg.jpg"); } - 记得给元素设
height，否则div高度为 0，图看不见 - 记事本 →「另存为」→ 在「编码」下拉菜单选
UTF-8（别选「UTF-8-BOM」，虽能用但多余） - 右键 HTML 文件 →「属性」→ 确认「只读」没勾上，否则浏览器可能拒绝读取资源
- 双击打开后按
F12打开开发者工具 → 切到「Network」标签 → 刷新 → 看bg.jpg那一行状态码是不是200；如果是failed或net::ERR_FILE_NOT_FOUND，就是路径或文件名错了 - 要完整显示 + 居中：
background-size: contain; background-repeat: no-repeat; background-position: center; - 要铺满全屏且不重复：
background-size: 100% 100%; background-repeat: no-repeat;（但会强制拉伸） - 真正实用的组合（推荐）：
background-size: cover; background-position: center; background-attachment: fixed;—— 后者让背景随滚动“不动”，视觉更稳 - 注意：
background-attachment: fixed在移动端多数浏览器不支持，纯桌面场景再用
图片不显示？检查这三件事
不是代码写错，就是环境卡住了。记事本保存时默认是 ANSI 编码，但 HTML 必须是 UTF-8（带 BOM 或不带都行），否则中文路径或注释可能让整个样式失效。
为什么加了 background-size: cover 还是拉伸变形？
因为 cover 是按比例缩放并裁剪填满容器，不是“等比缩放居中显示”。如果你想要完整看到整张图且居中，得换策略。
