요소를 절대적으로 배치하면 선형 그라데이션이 사라지는 이유는 무엇입니까?

요소가 절대적으로 배치되면 선형 그라데이션이 사라지는 이유는 무엇입니까?

텍스트 블록을 화면에서 수직 및 수평으로 중앙 집중화하기 위해 사용자는 위치를 사용하는 경우가 많습니다. : 요소의 절대 속성입니다. 그러나 이러한 위치 지정으로 인해 선형 그라데이션 배경이 사라질 수 있습니다.

이 문제를 해결하려면 본문 요소의 높이가 배경을 표시하기에 충분한지 확인하세요. 높이를 설정하지 않으면 페이지에 콘텐츠가 있을 때만 배경이 나타나므로 요소가 절대적으로 위치할 때 그라데이션이 사라질 수 있습니다.

예를 들어 min-height: 100vh를 body 요소는 요소의 위치에 관계없이 배경이 항상 표시되도록 보장합니다.

<code class="css">body {
  background: linear-gradient(20deg, #B7B0F6, #B1D5F9);
  min-height: 100vh;
}

header {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-right: -50%;
  transform: translate(-50%, -50%);
}</code>

위 내용은 요소를 절대적으로 배치하면 선형 그라데이션이 사라지는 이유는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!