最标准方式是用css background-image属性，需配齐宽高、background-size、background-position、background-repeat，并加background-color兜底；禁用img标签模拟背景。
直接用 CSS 的 background-image 属性是最标准、最可控的方式。关键不是“加张图”，而是让图正确显示——得配好尺寸、位置、重复行为，还得确保 div 本身有宽高。
必须设置宽高或内容撑开
div 默认高度为 0，即使写了 background-image，也看不到图。解决方法有两种：
- 显式设定
width和height（如width: 400px; height: 250px;） - 用
min-height适配视口，比如全屏背景写min-height: 100vh;（比height: 100%;更可靠） - 或者让 div 里有文字、图片等内容自然撑开高度
核心样式要配齐
单写 background-image: url(...) 很容易出问题：图被拉伸、只显一角、反复平铺。推荐一次性写全这四条：
-
background-image: url('bg.jpg');—— 路径用相对路径优先，从 CSS 文件所在目录算起 -
background-size: cover;—— 填满容器，适合 banner；若需完整显示用contain -
background-position: center;—— 避免图偏左上角，居中更稳妥 -
background-repeat: no-repeat;—— 关闭默认平铺，防止意外重复
也可以合并简写：background: url('bg.jpg') center/cover no-repeat;，但注意 IE11 及更早版本对斜杠语法支持不稳，生产环境建议分开写。
加个兜底色更安全
网络慢、路径错、图片加载失败时，用户会看到一片空白。加一行 background-color 就能优雅降级：
-
background-color: #f0f0f0;—— 浅灰，柔和不突兀 -
background-color: transparent;—— 如果父容器已有背景，可设透明
这个颜色会在图片未加载完或加载失败时显示，提升页面容错性。
别用 img 标签“假装”背景
有人把 <img> 放进 div，再用 position: absolute; 盖住内容，当成背景——这是错误做法：
-
<img>是语义化的内容元素，会被屏幕阅读器读出、影响 SEO、自带 margin - 无法实现
cover或contain这类精准缩放逻辑 - z-index 层叠易出错，响应式适配也更麻烦
真正只是装饰、不传递信息的图，就该用 background-image。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
