background-position通过@keyframes线性改变其值（如0 0→-20px -20px）实现背景滚动，需匹配图案尺寸、设background-repeat:repeat、用linear缓动及infinite迭代，确保无缝平铺。
background-position 怎么让背景图动起来
靠 background-position 实现滚动平铺，本质是用 CSS 动画持续改变它的值。不能只设一个固定值，得让它随时间线性变化，比如从 0 0 变到 -100px -100px，再接着变——浏览器会自动无缝衔接，前提是图案本身支持平铺（即无边缝、尺寸规整）。
关键点：动画必须作用在 background-position 上，且不能用 transform 代替；否则滚动的是整个元素盒，不是背景层本身，会破坏平铺逻辑。
- 用
@keyframes定义从0% { background-position: 0 0; }到100% { background-position: -20px -20px; }的变化（数值取决于图案尺寸） - 动画时长越长，滚动越慢；取值建议 ≥ 2s，太快易晕，太慢看不出动效
- 必须加
background-repeat: repeat;，否则即使位移了也只显示一次
为什么 background-size 和图案尺寸要匹配
如果图案是 20×20px 的小方块，但你设了 background-size: 40px 40px，那每次位移 20px 就会错位——实际需要位移 40px 才能回到“视觉重复点”。不匹配会导致滚动卡顿、出现横竖细线或跳帧。
最稳做法：先确认图案原始尺寸（比如用图片编辑器看），然后设 background-size 为该尺寸的整数倍（通常就用原尺寸），再让 background-position 动画步长 = 该尺寸值。
- 图案尺寸 16×16px →
background-size: 16px 16px;+ 动画终点设background-position: -16px -16px; - 若用 SVG 或 base64 图案，务必检查导出时是否带空白边或缩放干扰
- 用
background-image: url(...)时，服务器返回的图片尺寸必须和 CSS 中预设一致，否则缓存或 CDN 可能返回压缩后失真的版本
滚动方向控制：X 轴、Y 轴、斜向怎么配
background-position 是二维值，两个数字分别对应 X 和 Y 偏移。想只横向滚？Y 值固定；只纵向？X 值固定；斜向？两个都变，但比例要协调，否则看起来是拉伸而非平滑滑动。
- 纯横向：动画终点写
background-position: -100px 0; - 纯纵向：写
background-position: 0 -100px; - 右下斜向：写
background-position: -50px -50px;（等比）或-80px -40px;（宽幅更大，更“快”） - 反向滚动？把起点和终点对调，比如
0 0→100px 100px，但注意正数位移会让图案“往左上跑”，视觉上是反的
兼容性和性能要注意什么
所有现代浏览器都支持 background-position 动画，但 Safari 旧版（≤13.1）对 background-position 的硬件加速不友好，可能掉帧；Firefox 在高 DPI 屏幕下偶发渲染抖动。
真正影响体验的是动画触发方式：直接 animating background-position 是 layout 触发型，不如 transform 流畅。但这里没得选——transform 不动背景，只动盒子。所以只能靠优化：
- 加
will-change: background-position;提前告知浏览器要动这个属性（仅在必要时加，别滥用） - 避免同时 animating 多个 background 层（比如叠加多个
background-image） - 用
animation-timing-function: linear;，别用ease，非线性会导致速度忽快忽慢，破坏平铺节奏 - 移动端慎用大图+高频滚动，iOS Safari 容易内存溢出，优先用小尺寸 SVG 或 CSS 渐变模拟图案
真正难的不是写出来，而是让每一次位移都严丝合缝地接上上一帧的尾部——差 0.5px 都可能在边缘闪一道白线。调试时放大 400%，盯着交界处看两秒，比跑十次热重载更管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
