使用jQuery或纯CSS实现网站背景图片无限向上滚动的求助

核心逻辑 #

通过CSS原生background-position动画结合纵向背景重复特性，控制背景整体偏移一个完整的图片高度，实现无缝滚动效果，完全不会出现底部截断问题。

完整实现代码 #

HTML 结构 #

如果是整站背景可以直接挂载到<body>标签，也可以单独设置背景层：

<!-- 单独背景层（可选） -->
<div class="scrolling-background"></div>
<!-- 你的页面内容 -->
<div class="page-content">
  <!-- 内容写在这里 -->
</div>

CSS 样式 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/* 背景层样式 */
.scrolling-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  /* 替换为你的图片路径 */
  background: url("your-image-path.jpg") repeat-y top center;
  background-size: 1920px 4982px;
  /* 动画参数：时长 运动曲线 循环模式 */
  animation: bgScroll 60s linear infinite;
}
/* 页面内容样式（可选，确保内容浮在背景上方） */
.page-content {
  position: relative;
  z-index: 1;
  padding: 20px;
  color: #fff;
}
/* 滚动动画定义 */
@keyframes bgScroll {
  from {
    background-position: center 0;
  }
  to {
    /* 偏移值和图片高度保持一致，你的图片高度为4982px */
    background-position: center -4982px;
  }
}

配置说明 #

• 动画时长可自行调整：数值越大滚动速度越慢，比如120s为极慢滚动，30s为较快滚动
• 更换背景图时，同步修改background-size的高度值和@keyframes里的偏移值，两者必须和实际图片高度一致才能保证无缝衔接
• 若图片宽度需要自适应屏幕宽度，可将background-size改为100% auto，偏移值仍然使用原图高度即可

内容的提问来源于stack exchange，提问作者Kevin Lupo