如何仅用一张图片实现无缝无限滚动横幅-html教程-PHP中文网

本文介绍一种纯 css 方案，利用 background-image + background-repeat + animation 实现真正无缝、无间隙的无限横向滚动横幅，避免单图位移时右侧出现空白缺口。

本文介绍一种纯 css 方案，利用 background-image + background-repeat + animation 实现真正无缝、无间隙的无限横向滚动横幅，避免单图位移时右侧出现空白缺口。

要实现「仅用一张图片」却始终填满整个容器、左右无限循环滚动且零视觉断点的效果，关键在于放弃对元素做位移动画——因为单张在 transform: translateX() 过程中必然存在起始/结束位置的边界，导致重复衔接处露出背景色（即你观察到的“右侧空隙”）。

✅ 正确解法：将图片设为容器的平铺背景，再通过 background-position 动画驱动其持续滑动，配合 background-repeat: repeat-x 与合理的尺寸控制，天然实现无缝延展。

以下是完整、可直接运行的优化方案：

<div class="ticker">
  <a href="https://example.com" target="_blank" class="ticker-content" id="ticker-link">
    <!-- 移除 img 标签，改用 CSS 背景 -->
  </a>
</div>

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.ticker {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 10px 0;
  text-align: center;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
}

.ticker-content {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  /* 关键：使用背景图替代 img */
  background-image: url('https://images.all-free-download.com/images/graphiclarge/beach_cloud_dawn_horizon_horizontal_landscape_ocean_601821.jpg');
  background-size: auto 100%; /* 高度占满，宽度按比例缩放（保持清晰）*/
  background-repeat: repeat-x; /* 水平无限平铺 */
  background-position: 0 0;
  animation: scrollBackground 15s linear infinite; /* 滚动周期可调 */
}

@keyframes scrollBackground {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 100% 0; /* 向右滚动等效于背景向左移动 */
  }
}

/* 暂停交互：悬停时暂停动画 */
.ticker-content:hover {
  animation-play-state: paused;
}

// 保留原有交互逻辑（精简版）
const tickerLink = document.getElementById('ticker-link');

tickerLink.addEventListener('click', function(e) {
  // 若正在滚动，点击不跳转（可选）
  if (getComputedStyle(this).animationPlayState === 'running') {
    e.preventDefault();
  }
});

? 核心要点说明：

background-repeat: repeat-x 确保图像在水平方向自动无缝复制，无论容器多宽；
background-size: auto 100% 使图片高度撑满容器，宽度按原始比例缩放（避免拉伸变形），同时保证平铺单元足够大以减少锯齿；
animation 仅改变 background-position，浏览器对此优化极佳，性能远优于 transform 位移；
100% 的位移值代表一个平铺单元的宽度（非容器宽度），因此动画自然循环，无跳跃或间隙。

⚠️ 注意事项：

若原图过窄（如仅 200px），平铺后可能出现明显重复纹理。此时建议预处理图片：用设计工具将其横向拼接 2–3 次再导出，作为背景图源，提升视觉连贯性；
不要设置 background-size: cover 或 contain —— 它们会破坏平铺逻辑，导致无法重复；答案中提到的 background-size: cover 是误解，不可用于此场景；
如需响应式支持，可结合 background-size: 200% 100% + background-position: 0% 0% → -100% 0% 实现更灵活的双倍宽度滚动（进阶技巧）。

该方案零 JS 图片操作、兼容性强（Chrome/Firefox/Safari/Edge 均支持）、无重绘闪烁，是生产环境推荐的标准实践。