无限滚动背景图像扩展了页面宽度。我该如何解决这个问题

Question

我正在尝试构建一个页面，我需要在其中创建无限滚动背景图像，其中图像循环以创建无限效果。图像上方有一张卡片显示背景上出现的内容。图像在较小的屏幕上溢出页面宽度，最终在水平方向留下巨大的空间并弄乱布局。

这是反应代码：

"use client";
import React from "react";

import { Button } from "./ui/button";
import Link from "next/link";
import Image from "next/image";

import { useMedia } from "react-use";

const Landing = () => {
  const isMobile = useMedia("(max-width: 576px)", false);
  const isTablet = useMedia(
    "(min-width: 577px) and (max-width: 1023px)",
    false
  );
  const isDesktop = useMedia("(min-width: 1024px)", false);


  let height = 40;
  let width = 40;
  if (isMobile) {
    height = 20;
    width = 200;
  } else if (isTablet) {
    height = 300;
    width = 300;
  } else if (isDesktop) {
    height = 300;
    width = 300;
  }

  return (
    <div className="h-[90vh] flex flex-col justify-center items-center overflow-hidden">
      <div className="infinite-scrolling absolute"></div>
      <div className="flex flex-col items-center text-center gap-8 glassy border-outline rounded-lg py-8 px-6 w-[90vw] sm:w-full z-40">
        <div className="flex flex-col items-center gap-4">
          <h1 className="font-bold text-3xl tracking-tighter md:text-5xl">
            My CLUB
          </h1>
          <h2 className="font-bold text-3xl tracking-tight text-blue-600 md:text-4xl">
            XYZ
          </h2>
        </div>
        <h3 className="font-semibold text-xl tracking-tighter text-rose-600 md:text-3xl">
          ABC
        </h3>
        <div className="w-full flex justify-center items-center">
          <Image
            src="/banner.png"
            alt="logo"
            width={width}
            height={height}
          />
        </div>
        <div>
          <Irrelevant/>
        </div>
      </div>
    </div>
  );
};


export default Landing;

这是使用的CSS：

.infinite-scrolling {
  background: url("../public/background_large.jpg") repeat-x;
  height: 100vh;
  width: 5076px;
  animation: slide 60s linear infinite;
  filter: grayscale(80%);
}

.glassy {
  background: rgba(27, 26, 85, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

@keyframes slide {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-1920px, 0, 0); /* The image width */
  }
}

我希望图像在背景中循环，本质上创建无限滚动效果。 此代码在较小的屏幕上水平扩展页面，可以滚动。我该如何防止这种情况发生？

任何帮助都会很棒。如果有一个包可以容纳这种东西，那就太棒了。谢谢。

Answer 1

您想要为

background-position

制作动画，而不是图像的容器。那么您就不必处理容器的大小及其在较小屏幕上溢出的问题。

这是可能对您有帮助的 CSS

.infinite-scrolling {
  background: url("https://fastly.picsum.photos/id/641/200/200.jpg?hmac=9pd71nRRRsT7TXf0zn0hQ6tW6VQnQ-UtL1JXDhJZB8E")
    repeat-x;
  background-size: auto 100%; /* Scale the image to fit the height */
  height: 200px; /* height of the image */
  width: 100%; /* full width of the container */
  animation: slide 1s linear infinite; /* Adjust duration for smoothness */
  filter: grayscale(80%);
  top: 0;
}

@keyframes slide {
  from {
    background-position: 0 0;
  }
  to {
    background-position: -200px 0;
  }
}

.glassy {
  background: rgba(27, 26, 85, 0.35);
  box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

这是沙盒和预览