HTML 문서의 CSS 배경 그라데이션에 문제가 있습니다. 선형 그래디언트를 배경으로 사용하고 본문 요소에 설정하는 페이지를 디자인했습니다. 내가 직면한 문제는 스크롤할 콘텐츠가 더 많음에도 불구하고 화면이 처음 끝나는 곳에서 그라데이션이 끝나는 것처럼 보인다는 것입니다. 따라서 아래로 스크롤하면 그라디언트의 두 번째 인스턴스가 처음부터 다시 시작되는 것처럼 보입니다.

현재 CSS(SCSS) 코드는 다음과 같습니다.

예상되는 동작은 스크롤해야 하기 때문에 처음에는 표시되지 않는 콘텐츠를 포함하여 그라데이션이 항상 전체 화면을 덮는 것입니다. 두 개의 그라디언트 인스턴스를 피하고 싶습니다. 기본적으로 그라데이션은 화면 높이와 스크롤 높이에 맞춰 조정되어야 합니다.

height: auto; min-height: 100%;와 같은 다양한 CSS 속성과 값을 사용해 보았으나 작동하지 않는 것 같습니다. 나는 또한 반복하지 않고 시도했지만 그것은 쓰기 직사각형을 표시한다는 것입니다. 어떤 도움이라도 대단히 감사하겠습니다! 오류를 재현하는 데 필요한 HTML은 다음과 같습니다.

아래 코드 조각에 나와 있습니다.

으아아아 으아아아