如何将笔记本本地图片设置为网站背景及图片插入代码写法

• 第一步：整理本地项目文件
  把你准备好的jpg/png格式背景图，和编写的网页HTML文件放在同一个项目文件夹内。推荐单独新建命名为images的子文件夹专门存放图片，方便后续管理。
  参考标准项目结构：

  你的网站文件夹/
  ├─ index.html  # 网页主文件
  └─ images/
     └─ bg.jpg  # 准备用作背景的本地图片
  

  注意：不要直接使用电脑本地绝对路径（比如C:\Users\用户名\Desktop\bg.jpg），这类路径仅在你自己设备双击打开HTML时临时生效，一旦迁移文件、部署上线或者换设备访问，图片会直接加载失败，必须使用相对路径。

• 第二步：编写背景配置代码
  通过CSS给页面body标签设置背景样式即可，jpg和png格式图片的设置逻辑完全一致，只需要替换代码里的图片路径为你自己的文件相对路径即可。
  你可以直接参考下面的可运行完整HTML示例，对照修改自己的代码：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>我的网页</title>
    <style>
      /* 清除浏览器默认边距，避免页面四周出现白边 */
      * {
        margin: 0;
        padding: 0;
      }
      body {
        /* 替换为你自己的图片相对路径：如果图片和HTML文件放在同一目录，直接写url("你的图片名.png")即可 */
        background-image: url("images/bg.jpg");
        /* 让图片自动铺满整个屏幕，不会拉伸变形 */
        background-size: cover;
        /* 背景图始终居中显示 */
        background-position: center center;
        /* 禁止图片重复平铺 */
        background-repeat: no-repeat;
        /* 滚动页面时背景固定，不需要可以删掉这行 */
        background-attachment: fixed;
        /* 保证body最小高度占满整个视口 */
        min-height: 100vh;
      }
    </style>
  </head>
  <body>
    <!-- 你的网页正常内容写在这里 -->
  </body>
  </html>
  

• 第三步：排查常见问题
  如果保存后打开网页背景没有加载，优先检查两个点：

  • 代码里写的图片路径、文件名、后缀名（jpg/png）和本地实际文件是否完全一致，注意文件名区分大小写
  • 图片文件是否真的放在你写的路径对应的文件夹位置，不要放错目录

内容的提问来源于stack exchange，提问作者Esther Fernandez Teruel