Wie erreiche ich den Gleiteffekt eines CSS-Hintergrundbilds, ohne F12 zu verwenden?

Question

Ich versuche gerade, eine Website mit CSS und HTML zu erstellen, aber ich kann mein Hintergrundbild nicht verschieben und verschieben. Ich verwende Visual Studio Code und habe den Code auf Google ausgeführt, aber er bewegt sich nicht. Wenn ich jedoch F12 zum Debuggen drücke, geschieht dies? ! Das ist mein Code:

body {
    Hintergrundfarbe: schwarz;
    Rand: 0;
    Polsterung: 0;
    background-image: url("Ich habe eine korrekte URL, möchte sie aber nicht teilen");
    Hintergrundgröße: Cover;
    Hintergrundwiederholung: keine Wiederholung;
    Hintergrundanhang: behoben;
    Animation: Folie 1s linear unendlich abwechselnd;
    }

    @keyframes Folie {
        0 % {
            Hintergrundposition: -175 % 0 %;
        }
        100% {
            Hintergrundposition: 300 % 0 %;
        }
    }

    .container {
        maximale Breite: 800 Pixel;
        Rand: 0 automatisch;
        Polsterung: 0px;
    }

Ich habe versucht, Chat GPT um Hilfe zu bitten, war aber nur noch verwirrter

Answer 1

我想我知道问题出在哪里。动画不起作用是因为background-position属性被设置为fixed。这意味着背景图像不会移动，无论动画如何。要解决这个问题，你需要将background-position属性更改为scroll。

body {
    background-color: black;
    margin: 0;
    padding: 0;
    background-image: url("我有一个正确的URL，但我不想分享它");
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: scroll;
    animation: slide 1s linear infinite alternate; 
    }

    @keyframes slide {
        0% {
            background-position: -175% 0%;
        }
        100% {
            background-position: 300% 0%;
        }
    }

    .container {
        max-width: 800px;
        margin: 0 auto;
        padding: 0px;
    }