background-image需用正确路径（相对或根目录绝对路径），配合background-size（cover/contain）、background-position及background-color兜底，禁用HTML标签的background属性，避免简写覆盖。
background-image 用法和常见错误
直接写 background-image: url("xxx.jpg") 不生效，大概率是因为路径错了，或者图片没加载成功。浏览器不会报错，只会安静地显示默认背景色——这是最让人抓狂的地方。
实操建议：
- 优先用相对路径，且以 HTML 文件所在目录为基准；比如 HTML 在
/index.html，图片在/assets/bg.png，就写url("assets/bg.png") - 绝对路径从网站根目录算起，开头带
/，如url("/images/hero.jpg")；别写成url("C:\xxx\bg.jpg")，这在网页里完全无效 - 检查浏览器开发者工具的 Network 标签页，看图片请求是否返回 404；如果显示 404，说明路径或文件名对不上
-
background-image默认不缩放、不平铺，一张小图可能只在左上角显示一丁点，记得配合background-size和background-repeat
background-size 怎么设才不拉伸变形
用 cover 或 contain 是最稳妥的选择，硬写像素值（如 100px 200px）很容易破坏响应式布局。
区别很实在：
立即学习“前端免费学习笔记（深入）”；
-
background-size: cover：等比缩放填满容器，可能裁剪边缘；适合全屏 banner -
background-size: contain：等比缩放完整显示整张图，可能留白；适合 logo 或图标类背景 -
background-size: 100% 100%强制拉伸，一定变形，除非你明确需要这种效果 - 移动端要注意：某些老安卓 WebView 对
cover支持不稳定，可加一行background-size: -webkit-cover;兼容
body 或 div 设背景图后内容看不见了
不是图盖住了文字，而是背景图没设置好“定位”或“层级”，导致视觉上文字被压暗、发虚，甚至误以为消失了。
关键动作：
- 加
background-color做兜底，比如background-color: #f0f0f0，防止图片加载失败时页面一片空白 - 用
background-position控制焦点区域，例如background-position: center top把图顶部对齐容器顶部，避免重要内容被切掉 - 文字对比度不够？别调亮图片，加一层半透明遮罩更可控：
background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url("bg.jpg") - 确认父容器有明确高度；
div没内容又没设height，背景图就无处可画
HTML 标签里用 background 属性行不行
不行。background 是 CSS 属性，不能写在 HTML 标签的 style 外面，比如 <div background="xxx.jpg"> 是过时且无效的写法（HTML4 早废弃了）。
<p>正确姿势只有两种：</p>
<ul><li>内联样式：<code><div style="background-image: url('bg.jpg'); background-size: cover;">
<li>外部或内部 CSS：<code>.hero { background-image: url('bg.jpg'); background-size: cover; }，再给元素加 class
background 简写和 background-image 单独写，后者会被前者覆盖——比如先写 background: #fff，再写 background-image: url(x)，图就没了路径、尺寸、定位、加载状态，四者只要一个没对上，背景图就等于没加。尤其开发阶段本地双击打开 HTML 文件（file:// 协议），很多图片路径会意外失效，这点最容易被忽略。
