How to achieve the sliding effect of CSS background image without using F12?-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW)

How to achieve the sliding effect of CSS background image without using F12?

P粉903969231 2023-08-14 19:47:48

495

<p>I'm currently trying to make a website using CSS and HTML, but I can't seem to get my background image to slide and move. I use Visual Studio Code and I ran the code on Google but it doesn't move but when I press F12 to debug it does? ! This is my code: </p> <pre class="brush:php;toolbar:false;">body { background-color: black; margin: 0; padding: 0; background-image: url("I have a correct URL, but I don't want to share it"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; 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; }</pre> <p>I tried asking Chat GPT for help, but just got more confused</p>

P粉903969231

reply all(1)

P粉6337331462023-08-15 12:43:02 1 floor

I think I know where the problem is. The animation doesn't work because the background-position property is set to fixed. This means that the background image will not move, regardless of animation. To solve this problem, you need to change the background-position property to 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;
    }