本文详解如何修复 CSS 雾效背景（fog overlay）无法在 X 轴无限平铺滚动的问题，核心在于移除干扰 background-repeat: repeat-x 的 background-size: contain 属性，并配合正确的尺寸、定位与动画设置，实现流畅循环的 marquee 效果。
本文详解如何修复 css 雾效背景（fog overlay）无法在 x 轴无限平铺滚动的问题，核心在于移除干扰 `background-repeat: repeat-x` 的 `background-size: contain` 属性，并配合正确的尺寸、定位与动画设置，实现流畅循环的 marquee 效果。
要让雾效图像（如 fog-1.png）真正实现「无限横向重复 + 平滑滚动」的 marquee 动画，关键在于理解 CSS 背景图重复机制与尺寸控制之间的冲突。
? 问题根源：background-size: contain 破坏了 repeat-x
background-size: contain 会强制将整张图片完整缩放至容器内（保持宽高比），完全覆盖且仅显示一次——这与 background-repeat: repeat-x 的意图直接矛盾。即使声明了 repeat-x，contain 仍会优先确保单张图“填满可见区域”，导致重复失效，动画也仅在单张图范围内位移，无法形成无缝滚动。
✅ 正确做法是：移除 background-size: contain，改用 background-size: auto（默认值）或显式指定可重复的尺寸，例如 background-size: 200vw 100vh，以确保图像天然支持横向平铺。
✅ 修正后的核心 CSS（精简优化版）
.fog-img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-position: 0 center; /* 起始位置对齐左边缘 */
background-repeat: repeat-x;
animation: marquee 60s linear infinite;
}
.fog-img-first {
background-image: url('fog-1.png');
/* 移除 background-size: contain; ✅ */
/* background-size 默认为 auto → 图像按原始尺寸平铺 */
}
.fog-img-second {
background-image: url('fog-2.png');
/* 同样移除 contain */
/* 可选：添加负延迟实现交错滚动，增强层次感 */
animation-delay: -30s;
}
@keyframes marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-200vw); /* 滚动距离 ≥ 2×容器宽度，确保无缝衔接 */
}
}? 关键注意事项
- translateX(-200vw) 是黄金值：滚动距离设为 -200vw（而非 -100vw），是因为当第一张图右边缘刚移出视口时，第二张图（由 repeat-x 自动绘制）已就位，避免空白闪动；200vw 提供充足冗余，兼容不同缩放和渲染精度。
- 避免 height: 100vh + width: 100vw 冗余定义：.fog-img 已通过 position: absolute + top/left/width/height: 100% 占满父容器，无需再写 100vh/100vw，减少潜在尺寸计算冲突。
- background-position: 0 center 显式声明：确保重复起点对齐左边界，避免因浏览器默认行为差异导致偏移。
- 双图层增强鲁棒性（可选但推荐）：两个相同雾图层错开动画周期（如 animation-delay: -30s），可彻底消除任何可能的过渡缝隙，视觉更连贯。
? 补充建议：提升性能与兼容性
- 添加 will-change: transform 到 .fog-img 类，启用 GPU 加速（现代浏览器中显著提升动画流畅度）；
- 若雾图本身较宽（如 >2000px），可考虑导出为 WebP 格式并启用 loading="lazy"（虽为背景图不适用，但若改用 <img> 元素则需注意）；
- 在 body 和 #homescreen 中统一使用 margin: 0; padding: 0;，避免意外滚动条或间隙干扰视口计算。
至此，你的雾效将真正实现静音、无缝、无限循环的横向流动效果——不再依赖手动拉伸宽度，而是回归 CSS 背景原生的重复能力，简洁、高效、可维护。
