내 CSS3 그라데이션이 전체 브라우저 창을 채우기 위해 늘어나지 않는 이유는 무엇입니까?

CSS3에서 그라데이션 늘리기

요소의 경우 그라데이션이 전체 브라우저 창을 채울 정도로 늘어나지 않습니다. 대신 콘텐츠 영역이 채워질 때까지 반복됩니다. 그라디언트를 콘텐츠 이상으로 확장하려는 경우 이 동작은 실망스러울 수 있습니다.

해결 방법

그라디언트를 늘려 브라우저 창을 채우려면 다음 CSS를 적용하세요. :

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

이러한 스타일은 다음을 수행합니다.

• html { 높이: 100%; }: 의 높이를 설정합니다. 요소를 100%로 설정하여 그라데이션 배경이 볼 수 있는 영역 이상으로 확장될 수 있도록 합니다.
• body { height: 100%; 여백: 0; }: 의 높이를 설정합니다. 요소를 100%로 설정하고 여백을 제거하여 그라디언트와 콘텐츠 사이의 잠재적인 겹침을 제거합니다.
• background-repeat: no-repeat;: 콘텐츠 영역을 채운 후 그라디언트가 반복되는 것을 방지합니다.
• background-attachment: 고정;: 스크롤 막대가 움직일 때 그라데이션이 제자리에 고정되어 전체 전체에 걸쳐 지속적인 그라데이션 효과를 생성하도록 합니다. 창문.

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