HTML垂直滚动背景图技巧

一分耕耘，一分收获！既然打开了这篇文章《HTML背景图片上下滚动方法【垂直】》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

真正可控的垂直滚动靠 background-position 动画实现，需设置 background-repeat: repeat-y、用 @keyframes 改变 Y 值（如 0 → -100px），配合 animation: scrollBgUp 8s linear infinite；background-attachment: fixed 不支持该动画，JS 可进阶控制暂停与速度。

HTML 本身没有直接“让背景图片上下滚动”的属性，background-attachment: scroll 是默认行为，但它是随页面内容滚动，不是背景图自己动；真要实现背景图**持续垂直滚动（比如跑马灯式循环上移）**，必须用 CSS 动画 + background-position 控制。

用 @keyframes + background-position 垂直滚动

核心思路：把背景图设为重复（repeat），然后用动画不断改变 background-position 的 Y 轴值，形成向上/向下平滑移动效果。

• background-image 必须是可平铺的图，或足够高以避免滚动中露白
• 动画关键帧里改的是 background-position: 0 Y值，Y 值从 0px 变到负数（向上滚）或正数（向下滚）
• 用 background-size: auto 或具体宽高，避免拉伸变形；若用 cover 或 contain，background-position 动画可能失效或行为异常
• 动画时长和延时决定速度：时间越短越快，infinite 实现循环

@keyframes scrollBgUp {
  from { background-position: 0 0; }
  to { background-position: 0 -100px; }
}

.element {
  background-image: url('bg.jpg');
  background-repeat: repeat-y;
  animation: scrollBgUp 8s linear infinite;
}

background-attachment: fixed 不适用于自动滚动

这个属性只让背景图相对于视口固定，不随内容滚动——但它**完全不支持动画**。一旦设了 fixed，background-position 动画在多数浏览器中会静止或跳变，尤其在 Chrome 和 Safari 中表现不稳定。

• 不要在需要滚动动画的元素上同时写 background-attachment: fixed
• 如果想实现“视差滚动”效果，得用 JS 控制多个层的位移差，而不是依赖 fixed + CSS 动画
• 移动端对 fixed 背景兼容更差，部分 iOS 版本会强制转为 scroll

用 JS 控制滚动速度与暂停（进阶需求）

纯 CSS 动画无法响应鼠标悬停暂停、动态调速或根据滚动位置触发。这时需 JS 操作 style.backgroundPosition 或切换 CSS 类。

• 用 requestAnimationFrame 手动更新 backgroundPosition Y 值，比 CSS 动画更灵活
• 监听 mouseenter/mouseleave 切换 animation-play-state: paused/running
• 注意：JS 修改 backgroundPosition 时，必须带单位（如 '0px ' + y + 'px'），否则无效
• 若背景图尺寸大，频繁重绘可能影响性能，建议用 will-change: background-position 提示浏览器优化

let y = 0;
const el = document.querySelector('.scroll-bg');
function animate() {
  y -= 0.5; // 向上滚动速度
  el.style.backgroundPosition = `0 ${y}px`;
  requestAnimationFrame(animate);
}
animate();

真正可控的垂直滚动靠的是 background-position 动画，不是属性组合或 hack；图片尺寸、重复方式、动画起止值这三点没配对，滚动就会卡顿、撕裂或突然跳回原点。

今天关于《HTML垂直滚动背景图技巧》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！