내 CSS 그라데이션이 전체 브라우저 창을 채우지 못하는 이유는 무엇입니까?

웹 브라우저의 일관되지 않은 그라데이션 확장: 포괄적인 설명

body 요소에 대한 CSS3 그라데이션 배경을 설정할 때 사용자는 흥미로운 문제를 접할 수 있습니다. 그라디언트가 전체 창을 채우기 위해 늘어나지 않고 대신 패턴을 반복하는 동작입니다. 이는 WebKit 및 Gecko 브라우저 모두에서 의도된 기능이지만 원하는 효과가 창 하단까지 확장되는 연속 그라데이션인 경우 당황스러울 수 있습니다.

문제 이해

브라우저의 기본 동작은 배경 크기가 창보다 작을 때 그라데이션 패턴을 반복하는 것입니다. 본문 요소의 콘텐츠 높이가 300px에 불과한 경우 그라데이션은 해당 높이만 덮고 창의 나머지 공간을 채우기 위해 무한정 반복됩니다.

기본 동작 재정의

원하는 전체 창 그라데이션 효과를 얻으려면 CSS를 사용하여 기본 동작을 재정의해야 합니다. 이는 다음 스타일을 적용하여 수행할 수 있습니다.

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}

html 요소와 본문 요소의 높이를 모두 100%로 설정하면 전체 창이 그라데이션 영역이 됩니다. 여백: 0; 규칙은 body 요소 주위에 추가 공간이 없도록 보장하고 background-repeat: no-repeat; 그라데이션이 반복되는 것을 방지합니다. 또한 배경 첨부: 고정; 페이지 콘텐츠와 함께 스크롤되지 않도록 그라데이션을 제자리에 고정합니다.

위 내용은 내 CSS 그라데이션이 전체 브라우저 창을 채우지 못하는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!