F12를 사용하지 않고 CSS 배경 이미지의 슬라이딩 효과를 얻는 방법은 무엇입니까?

Question

현재 CSS와 HTML을 사용하여 웹사이트를 만들려고 하는데 배경 이미지를 슬라이드하고 이동할 수 없는 것 같습니다. Visual Studio Code를 사용하고 Google에서 코드를 실행했지만 이동하지 않지만 디버깅하기 위해 F12를 누르면 이동합니까? ! 내 코드는 다음과 같습니다.

본체 {
    배경색: 검정색;
    여백: 0;
    패딩: 0;
    background-image: url("올바른 URL이 있지만 공유하고 싶지 않습니다.");
    배경 크기: 표지;
    background-repeat: 반복하지 않음;
    배경 부착: 고정;
    애니메이션: 슬라이드 1s 선형 무한 대체;
    }

    @keyframes 슬라이드 {
        0% {
            배경 위치: -175% 0%;
        }
        100% {
            배경 위치: 300% 0%;
        }
    }

    .컨테이너 {
        최대 너비: 800px;
        여백: 0 자동;
        패딩: 0px;
    }

채팅 GPT에 도움을 요청했지만 더 혼란스러워졌습니다

Answer 1

문제가 무엇인지 알 것 같습니다. background-position 속성이 고정으로 설정되어 있어 애니메이션이 작동하지 않습니다. 이는 애니메이션에 관계없이 배경 이미지가 이동하지 않음을 의미합니다. 이 문제를 해결하려면 background-position 속성을 스크롤하도록 변경해야 합니다.

으아악