任何块级或可设宽高的HTML元素均可通过background-image设置局部背景图，需明确width/height、禁用平铺、合理设置background-size（如cover/contain）及background-position，并注意响应式适配与伪元素遮罩技巧。
用 background-image 给任意 HTML 元素加局部背景图
不是只有 常见错误是把图片当内容插进去，结果无法控制平铺、定位、缩放——那不是“背景”，只是张图而已。 默认情况下，背景图会平铺（ 背景图本身不占文档流，但如果你发现文字看不见、按钮点不了，大概率是 z-index 或 color 没配好。 立即学习“前端免费学习笔记（深入）”； 很多人在 背景图的“局部性”本质是 CSS 作用域问题，不是 HTML 结构决定的。最容易被忽略的是：没有显式声明 才能设背景图，任何块级或可设宽高的元素（比如 、background-image，而不是靠
width 和 height（或通过内容、flex/grid 布局撑开），否则背景图可能不显示background-image: url('./images/banner-bg.jpg');；绝对路径或 CDN 地址也行，但注意跨域限制
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; 也合法，适合已知尺寸的静态区域避免背景图被内容遮挡或干扰布局
::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;
}
}
url() 却漏掉 no-repeat ——万一基础样式里没写，小屏下就变成平铺了url("data:image/svg+xml,...")）background-repeat: no-repeat 时，所有局部背景默认平铺——哪怕你只想要一张图。
