CSS 그라데이션 배경을 반복하는 대신 전체 브라우저 창에 맞게 늘리려면 어떻게 해야 합니까?

본체 요소의 그라데이션 배경: 반복 또는 늘이기?

웹 디자인에서 배경에 CSS 그라데이션을 사용하면 미학을 향상할 수 있습니다. 그러나 본문 요소에 그라디언트를 적용하면 그라디언트가 늘어나지 않고 반복되는 일반적인 문제가 발생합니다.

질문:

문서의 본문 내용의 높이는 300px입니다. -webkit-gradient 또는 -moz-linear-gradient를 사용하여 그라데이션 배경을 설정하면 높이가 300px에 불과하고 나머지 창 공간을 채우기 위해 끝없이 반복되는 그라데이션이 생성됩니다. 반복하지 않고 창에 맞게 그라데이션을 늘리는 솔루션이 있습니까?

답변:

전체 창을 채울 정도로 늘어나는 그라데이션을 얻으려면, 다음 CSS를 적용하세요.

html {
    height: 100%;
}

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

• HTML 요소의 높이는 이를 보장하기 위해 100%로 설정됩니다. 전체 창 높이로 확장됩니다.
• body 요소의 높이도 100%로 설정되어 html 요소 내에서 사용 가능한 높이를 채웁니다.
• margin: 0은 모든 요소를 ​​제거하기 위해 추가됩니다. 본문 주위에 원치 않는 간격이 있습니다.
• background-repeat: no-repeat는 그라데이션이 반복되는 것을 방지합니다.
• background-attachment:fixed는 창이 스크롤될 때 그래디언트를 제자리에 유지합니다.

이러한 CSS 규칙을 구현하면 본문 요소의 그래디언트 배경이 창을 채울 만큼 늘어납니다. 전체 창 높이로 시각적으로 매끄럽고 몰입감 있는 효과를 제공합니다.

위 내용은 CSS 그라데이션 배경을 반복하는 대신 전체 브라우저 창에 맞게 늘리려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!