내 CSS3 그라데이션 배경이 전체 창 높이로 늘어나지 않는 이유는 무엇입니까?

CSS3의 그라데이션 배경 늘이기 문제

문제:

그라디언트 배경을 설정했음에도 불구하고 <본문> CSS3 그래디언트를 사용하는 요소에서는 그래디언트 높이가 콘텐츠 높이로 고정되어 남아 있는 창 공간을 채우기 위해 반복됩니다. 이 동작은 WebKit 및 Gecko 브라우저 모두에서 발생합니다.

해결책:

그라디언트를 창 높이까지 강제로 늘리려면 다음을 적용하세요. CSS:

html {
    height: 100%;
}

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

설명:

• html 및 본문 높이가 100%로 설정되어 강제로 전체 창 높이를 채우게 됩니다.
• 여백: 0; 본문에서 원하지 않는 여백을 제거합니다.
• background-repeat: no-repeat; 그라데이션이 반복되는 것을 방지합니다.
• background-attachment:fixed; 그라디언트의 위치를 ​​수정하여 창 크기가 조정될 때 고정된 상태를 유지합니다.

이 솔루션을 사용하면 페이지 레이아웃을 반복하거나 방해하지 않고 그라디언트가 수직으로 늘어나 전체 창 높이를 채울 수 있습니다.

위 내용은 내 CSS3 그라데이션 배경이 전체 창 높이로 늘어나지 않는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!