如何在没有使用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;
    }