CSS background-position动画失效：背景图铺满屏幕时无法滚动

这个坑我之前踩过！当你给元素设置background-size: cover时，浏览器会自动调整背景图的尺寸和位置，让它刚好铺满容器且保持比例，这时候你直接修改background-position-x的动画就会被cover的自动适配逻辑“覆盖”——浏览器会强制让背景图处于最优的位置，你的动画指令自然就失效了。

要实现铺满全屏+从右到左持续滚动的效果，推荐用伪元素+transform平移的方案，既能保留cover的适配特性，又能让动画正常运行，而且性能更好：

完整代码示例 #

<body>
  <!-- 你的页面内容 -->
</body>

body {
  background-color: rgb(15, 5, 40);
  margin: 0;
  overflow: hidden; /* 避免滚动动画触发页面滚动条 */
}

/* 用伪元素承载背景图和动画 */
body::before {
  content: "";
  position: fixed; /* 固定定位，跟随视口滚动 */
  top: 0;
  left: 0;
  width: 200%; /* 宽度设为2倍视口，确保滚动时有足够的重复空间 */
  height: 100%;
  background-image: url('./images/star background.png');
  background-repeat: repeat;
  background-size: cover; /* 这里cover能正常工作，因为伪元素是全屏的 */
  animation: starScroll 3s linear infinite;
}

@keyframes starScroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%); /* 平移-50%，刚好让200%宽度的背景完成一次完整滚动 */
  }
}

为什么这个方案可行？ #

• 伪元素是独立的层，不会受到body背景的适配限制，background-size: cover能正常适配伪元素的全屏尺寸
• 用transform: translateX做动画比修改background-position性能更好（浏览器会开启GPU加速）
• 设置伪元素宽度为200%，配合repeat属性，平移-50%时背景会无缝衔接，实现无限滚动的效果

如果你不想用伪元素，也可以试试给背景图设置background-size: 100% auto;（或auto 100%，根据图片比例调整），但这种方式可能会让图片拉伸变形，不如伪元素方案优雅。

内容的提问来源于stack exchange，提问作者Shark Coding