background-size控制背景图缩放方式：cover完全覆盖（可能裁剪）、contain全部可见（留白）、100% 100%强制拉伸（易变形）、200px auto定宽自适应；background-attachment决定滚动行为：scroll随内容、fixed相对视口、local随局部滚动；二者组合时参照系易混淆，fixed下cover按视口计算，local+100% 100%在可滚动容器中会反复拉伸；优先用scroll+cover，调试启用Paint flashing；IE9+支持background-size但不支持多背景独立size，iOS Safari 15.4前local有渲染异常；复杂场景建议用sticky或JS替代。
background-size 控制图片拉伸与裁剪行为
设置 background-size 直接决定背景图如何适配容器，不是“越大越好”，而是要匹配视觉意图和响应式需求。
-
cover：等比缩放至完全覆盖容器，可能裁剪边缘 —— 适合全屏 banner 或头图 -
contain：等比缩放至全部可见，留白不可避免 —— 适合图标、徽标类背景 -
100% 100%：强制拉伸填满，会严重变形 —— 仅限已知宽高且允许失真的场景（如纯色渐变底图） -
200px auto：指定宽度，高度自动保持比例 —— 常用于固定宽度的装饰性背景条
注意：background-size 对 background-image: linear-gradient(...) 无效；它只作用于位图或 SVG 背景。
background-attachment 决定滚动时背景是否跟随
background-attachment 的关键影响在「滚动锚点」，尤其在有滚动容器（如 overflow: auto 的 div）或整页滚动时表现差异极大。
-
scroll（默认）：背景随内容一起滚动，相对容器定位 -
fixed：背景相对于视口固定，不随滚动移动 —— 常用于视差效果，但注意在移动端 Safari 中可能触发渲染 bug 或被忽略 -
local：背景随容器内滚动内容一起移动（仅当容器自身可滚动且设置了overflow）—— 很少用，但处理嵌套滚动区域时是唯一能实现“背景随局部内容滑动”的方式
典型错误：对一个没有设置 height 和 overflow 的 div 设置 background-attachment: local，结果毫无反应 —— 它必须依赖局部滚动上下文才生效。
立即学习“前端免费学习笔记（深入）”；
background-size 和 background-attachment 组合使用的陷阱
两者叠加时，background-attachment 会影响 background-size 的参照系，这点极易被忽略。
- 当
background-attachment: fixed时，background-size: cover是相对于视口计算的，不是父容器 —— 如果父容器只有 300px 高，但视口是 800px，背景图仍按 800px 高度缩放 -
background-attachment: local+background-size: 100% 100%在可滚动容器中会导致背景随内容反复拉伸，因为每次滚动都会重绘背景尺寸 - 使用
background-size: cover且容器宽高动态变化（如 flex 子项）时，background-attachment: fixed可能造成背景“卡住不动”，而scroll才能保证背景始终贴合容器边界
实测建议：优先用 scroll + cover，除非明确需要视口级固定效果；调试时打开浏览器开发者工具的「Rendering」面板，勾选 “Paint flashing”，观察背景重绘范围是否符合预期。
兼容性与现代替代方案
background-size 和 background-attachment 在所有现代浏览器中支持良好，但仍有细节差异：
- IE9+ 支持
background-size，但不支持多背景下的独立 size（如background: url(a.jpg), url(b.png); background-size: 20px, contain;在 IE 中会失效） -
background-attachment: local在 iOS Safari 15.4 之前存在渲染异常，滚动时背景可能错位或闪烁 - 若需精确控制复杂背景行为（如滚动触发缩放），CSS 已力不从心，应改用
position: sticky+transform: scale()或 JS 监听scroll事件做精细控制
真正难的不是写对这两个属性，而是判断「这个背景到底该属于谁」—— 是属于元素本身？它的滚动容器？还是整个视口？搞错归属，再准的值也没用。
