任何块级或可设宽高的HTML元素均可通过background-image设置局部背景图，需明确width/height、禁用平铺、合理设置background-size（如cover/contain）及background-position，并注意响应式适配与伪元素遮罩技巧。
用 background-image 给任意 HTML 元素加局部背景图
不是只有 <body> 才能设背景图，任何块级或可设宽高的元素（比如 <div>、<section>、<header>）都能独立加背景图。关键在 CSS 里用 background-image，而不是靠 <img> 标签硬塞。
常见错误是把图片当内容插进去，结果无法控制平铺、定位、缩放——那不是“背景”，只是张图而已。
- 必须给元素设置明确的
width和height（或通过内容、flex/grid 布局撑开），否则背景图可能不显示 - 推荐用相对路径，比如
background-image: url('./images/banner-bg.jpg');；绝对路径或 CDN 地址也行，但注意跨域限制 - 如果图没出来，先检查浏览器开发者工具的 Network 面板，看图片是否 404
background-size 决定图片怎么填满局部区域
默认情况下，背景图会平铺（repeat），但多数场景你想要的是“一张图完整覆盖某个 div”。这时候必须手动关掉平铺，并指定缩放行为。
div.hero {
background-image: url('./bg.jpg');
background-repeat: no-repeat;
background-size: cover; /* 或 contain / 100% 100% */
background-position: center;
}-
cover：等比缩放至完全覆盖容器，可能裁剪边缘 -
contain：等比缩放至全部可见，可能留白 -
100% 100%：强制拉伸填满，会变形，慎用 - 单独写
background-size: 800px 400px;也合法，适合已知尺寸的静态区域
避免背景图被内容遮挡或干扰布局
背景图本身不占文档流，但如果你发现文字看不见、按钮点不了，大概率是 z-index 或 color 没配好。
立即学习“前端免费学习笔记（深入）”；
- 文字颜色要和背景图对比足够（比如深图配浅字），别依赖“看起来还行”，用 DevTools 的颜色取色器验证
- 需要半透明遮罩提升可读性？用
::before伪元素叠一层黑/白+opacity，别直接调background-color: rgba(0,0,0,0.5)——它会盖住背景图 - 如果父容器用了
overflow: hidden，而背景图设置了background-attachment: fixed，滚动时可能出现错位或闪烁，这种情况直接删掉fixed
响应式下背景图失效？检查媒体查询里的 background-image 覆盖逻辑
很多人在 @media 里换图，却忘了重置 background-size 或 background-position，导致小屏上图被切掉一半。
@media (max-width: 768px) {
.hero {
background-image: url('./bg-mobile.jpg');
background-size: contain;
background-position: top center;
}
}- 移动设备优先加载小图，别让手机下载 2MB 的桌面图
- 不要只改
url()却漏掉no-repeat——万一基础样式里没写，小屏下就变成平铺了 - SVG 背景图在高 DPI 屏上更清晰，且体积小，适合图标类局部背景（如
url("data:image/svg+xml,...")）
背景图的“局部性”本质是 CSS 作用域问题，不是 HTML 结构决定的。最容易被忽略的是：没有显式声明 background-repeat: no-repeat 时，所有局部背景默认平铺——哪怕你只想要一张图。
