如何在沒有使用F12的情況下實現CSS背景圖片的滑動效果？

Question

我目前正在嘗試使用CSS和HTML製作網站，但我似乎無法讓我的背景圖片滑動和移動。我使用Visual Studio Code，並且在Google上運行了程式碼，但它不會移動，但是當我按下F12進行偵錯時，它會移動？ ！ 這是我的程式碼：

body {
    background-color: black;
    margin: 0;
    padding: 0;
    background-image: url("我有一個正確的URL，但我不想分享");
    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;
    }

我試著向聊天GPT求助，但只是更加困惑了

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