Comment obtenir l'effet coulissant de l'image d'arrière-plan CSS sans utiliser F12 ?

Question

J'essaie actuellement de créer un site Web en utilisant CSS et HTML, mais je n'arrive pas à faire glisser et déplacer mon image d'arrière-plan. J'utilise Visual Studio Code et j'ai exécuté le code sur Google mais il ne bouge pas mais lorsque j'appuie sur F12 pour déboguer, c'est le cas ? ! Voici mon code :

corps {
    couleur de fond : noir ;
    marge : 0 ;
    remplissage : 0 ;
    background-image: url("J'ai une URL correcte, mais je ne souhaite pas la partager");
    taille de l'arrière-plan : couverture ;
    répétition d'arrière-plan : pas de répétition ;
    pièce jointe d'arrière-plan : corrigé ;
    animation : diapositive 1s alternative infinie linéaire ;
    }

    Diapositive @keyframes {
        0% {
            position d'arrière-plan : -175 % 0 % ;
        }
        100 % {
            position d'arrière-plan : 300 % 0 % ;
        }
    }

    .récipient {
        largeur maximale : 800 px ;
        marge : 0 automatique ;
        remplissage : 0px ;
    }
J'ai essayé de demander de l'aide à Chat GPT, mais je suis devenu encore plus confus

Answer 1

Je pense que je sais quel est le problème. L'animation ne fonctionne pas car la propriété background-position est définie sur "fixe". Cela signifie que l'image d'arrière-plan ne bougera pas, quelle que soit l'animation. Pour résoudre ce problème, vous devez modifier la propriété background-position pour faire défiler.

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;
    }