Comment obtenir l'effet coulissant de l'image d'arrière-plan CSS sans utiliser F12 ?
P粉903969231
P粉903969231 2023-08-14 19:47:48
0
1
648
<p>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 : </p> <pre class="brush:php;toolbar:false;">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 ; }</pré> <p>J'ai essayé de demander de l'aide à Chat GPT, mais je suis devenu encore plus confus</p>
P粉903969231
P粉903969231

répondre à tous(1)
P粉633733146

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;
    }
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal