찾다

 >  Q&A  >  본문

CSS 배경 그라데이션이 전체 페이지(스크롤 가능한 콘텐츠 포함)를 덮지 않습니다.

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

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

으아아아

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

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

으아아아

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

으아아아 으아아아

P粉506963842P粉506963842480일 전712

모든 응답(2)나는 대답할 것이다

  • P粉682987577

    P粉6829875772023-09-13 12:03:46

    이 질문에는 background-repeatbackground-attachment 属性包含为 no-repeatfixed.然后,将 html 和 body 标记的 height 属性设置为 100%만 바꾸세요. 비슷한 답변

    으아아아 으아아아

    회신하다
    0
  • P粉947296325

    P粉9472963252023-09-13 00:58:37

    gradient-wrapper수업

    을 추가했습니다.

    으아아아 으아아아

    회신하다
    0
  • 취소회신하다