如何修改CSS代码实现背景图向右上角无限滑动？

以下是修改后的完整代码，可实现背景图向右上角方向无限循环滑动：

* {
    margin: 0;
    padding: 0;
}

.scrolling-image-container {
    overflow: hidden;
}

.scrolling-image {
    background: url("Pictures/z6c3UquP.png") repeat; /* 修改重复方式 */
    background-size: auto 100%;
    width: 1000%;
    height: 1000%; /* 增大高度以支持Y轴循环 */
    position: fixed;
    z-index: -1;
    animation: slide 1200s linear infinite;
}

@keyframes slide {
    0% {
        transform: translate3d(0, 0, 0);
    }
    100% {
        transform: translate3d(90%, -90%, 0); /* 调整X向右、Y向上的位移 */
    }
}

关键修改说明： #

• 背景重复模式：将repeat-x改为repeat，让背景在水平和垂直方向都能重复排列，避免滑动到边缘后出现空白区域。
• 容器高度调整：把.scrolling-image的height从100%改为1000%，和宽度保持一致，确保垂直方向有足够的背景内容支撑无限滑动循环。
• 动画位移参数：将关键帧的translate3d参数从(-90%, 0, 0)改为(90%, -90%, 0)：
  • 90%代表X轴向右移动容器宽度的90%（因为容器宽度是视口的1000%，移动90%后刚好让后续背景无缝衔接）
  • -90%代表Y轴向上移动容器高度的90%，实现向上滑动的效果
• 保持动画属性：保留linear（匀速）和infinite（无限循环），确保滑动过程流畅且持续运行。

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