background-size是CSS中控制背景图缩放的核心属性，需配合background-image使用且仅对设置背景图的元素生效；常见值包括cover、contain、100% 100%、指定像素及auto组合，须协同background-position和background-repeat使用；响应式场景推荐媒体查询或clamp()；搭配background-attachment: fixed时易失效，应谨慎处理。
background-size 属性是控制背景图缩放的核心
HTML 本身不直接调整背景图大小，真正起作用的是 CSS 的 background-size。它必须配合 background-image 使用，且只对设置了背景图的元素生效（比如 div、body 或带 background 的标签）。
常见错误是把图片塞进 <img> 标签再“当背景用”，结果发现 background-size 完全无效——那不是背景图，那是内容图，该用 width/height 或 object-fit。
-
background-size: cover：等比缩放填满容器，可能裁剪边缘 -
background-size: contain：等比缩放完整显示整张图，可能留白 -
background-size: 100% 100%：强行拉伸铺满，会变形 -
background-size: 200px 150px：指定宽高，同样可能变形 -
background-size: auto 100%：高度固定，宽度按原图比例自适应
background-position 和 background-repeat 影响最终呈现效果
光调大小不够，位置和是否平铺会彻底改变视觉结果。比如 background-size: cover 配合 background-position: top，就会优先显示图片上半部分；而默认的 center 可能切掉你想要的关键区域。
另外，background-repeat: no-repeat 是多数场景必需的，否则小图会被重复平铺，background-size 的设置就失去意义。
立即学习“前端免费学习笔记（深入）”；
- 想让 logo 居中显示且不拉伸？用
background-size: contain; background-position: center; background-repeat: no-repeat - 做全屏 banner 图？
background-size: cover; background-position: center; background-repeat: no-repeat是标配 - 要横向平铺一个纹理？那就别设
background-size，或设成auto 100%再配repeat-x
响应式背景下 background-size 要配合媒体查询或 clamp()
同一张背景图在桌面和手机上，cover 表现可能差异极大——手机竖屏下可能只看到人脸鼻子，桌面却刚好显示全身。硬编码像素值更不可取，因为设备像素比、视口宽高比都在变。
稳妥做法是用媒体查询分情况处理，或者用 clamp() 做流体缩放（需注意兼容性）：
header {
background-image: url('hero.jpg');
background-size: clamp(100%, 120vw, 200vh) auto;
background-position: center;
background-repeat: no-repeat;
}
上面这行 clamp(100%, 120vw, 200vh) 表示宽度最小 100%，最大 200vh，中间按视口宽度 120vw 流动缩放，适合超宽图横幅。
background-attachment: fixed 时 background-size 容易失效或错位
加了 background-attachment: fixed（实现视差滚动效果）后，background-size 有时表现异常，尤其在 Safari 和部分安卓浏览器中。原因在于 fixed 背景的渲染坐标系和普通背景不同，cover / contain 的“容器”可能被误判为视口而非当前元素。
解决方法只有两个：
- 放弃
fixed，改用 JS 滚动监听 +transform: translateY()模拟视差 - 强制指定尺寸并关闭自动行为：
background-size: 100vw 100vh; background-position: center;，但需确保图足够大
这个坑在调试时很难定位，因为错误不报错，只是图突然偏移或缩放失常——遇到 fixed 背景出问题，先怀疑 background-size 和它的计算上下文是否匹配。
