Bagaimana untuk mencapai kesan gelongsor imej latar belakang CSS tanpa menggunakan F12?

Question

Saya sedang cuba membuat tapak web menggunakan CSS dan HTML, tetapi saya nampaknya tidak dapat membuat imej latar belakang saya slaid dan bergerak. Saya menggunakan Kod Visual Studio dan saya menjalankan kod di Google tetapi ia tidak bergerak tetapi apabila saya menekan F12 untuk menyahpepijat ia berfungsi? ! Ini kod saya:

body {
    warna latar belakang: hitam;
    margin: 0;
    padding: 0;
    background-image: url("Saya mempunyai URL yang betul, tetapi saya tidak mahu berkongsinya");
    saiz latar belakang: penutup;
    background-repeat: tidak-ulang;
    lampiran latar belakang: tetap;
    animasi: slaid 1s linear tak terhingga silih berganti;
    }

    @keyframes slaid {
        0% {
            kedudukan latar belakang: -175% 0%;
        }
        100% {
            kedudukan latar belakang: 300% 0%;
        }
    }

    .bekas {
        lebar maksimum: 800px;
        margin: 0 auto;
        padding: 0px;
    }

Saya cuba meminta bantuan Chat GPT, tetapi semakin keliru

Answer 1

Saya rasa saya tahu apa masalahnya. Animasi tidak berfungsi kerana sifat kedudukan latar belakang ditetapkan kepada tetap. Ini bermakna imej latar belakang tidak akan bergerak, tanpa mengira animasi. Untuk menyelesaikan masalah ini, anda perlu menukar sifat kedudukan latar belakang untuk menatal.

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