如何用记事本写html加入背景图片

记事本写html加背景图需确保路径正确、保存为utf-8编码、元素有高度。路径用相对路径如”bg.jpg”或”img/bg.jpg”，避免绝对路径和中文名；css写在内中；检查network标签确认图片是否加载成功。

背景图片路径写错，浏览器根本不会加载

记事本本身没问题，问题全出在 background-image 的路径上。windows 资源管理器里双击打开的 HTML 文件是用 file:// 协议运行的，不走服务器，所以所有路径都是相对于当前 HTML 文件位置算的。

常见错误：background-image: url("C:UsersMePicturesbg.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，图看不见

图片不显示？检查这三件事

不是代码写错，就是环境卡住了。记事本保存时默认是 ANSI 编码，但 HTML 必须是 UTF-8（带 bom 或不带都行），否则中文路径或注释可能让整个样式失效。

• 记事本 →「另存为」→ 在「编码」下拉菜单选 UTF-8（别选「UTF-8-BOM」，虽能用但多余）
• 右键 HTML 文件 →「属性」→ 确认「只读」没勾上，否则浏览器可能拒绝读取资源
• 双击打开后按 F12 打开开发者工具 → 切到「Network」标签 → 刷新 → 看 bg.jpg 那一行状态码是不是 200；如果是 failed 或 net::ERR_FILE_NOT_FOUND，就是路径或文件名错了

为什么加了 background-size: cover 还是拉伸变形？

因为 cover 是按比例缩放并裁剪填满容器，不是“等比缩放居中显示”。如果你想要完整看到整张图且居中，得换策略。

• 要完整显示 + 居中：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 在移动端多数浏览器不支持，纯桌面场景再用

记事本写 HTML 加背景图，核心就三件事：路径对、编码对、高度有。其他全是锦上添花，先让图出来再说。