CSS의 HTML과 본문 배경 비교: 전체 화면 배경을 어디에 적용해야 합니까?

의 CSS 배경 vs : 두 뷰포트 이야기

CSS 배경을 또는

요소에서는 미묘하지만 중요한 차이가 발생합니다. 에 할당된 배경 본문의 실제 크기에 관계없이 전체 페이지에 걸쳐 확장됩니다. 반대로 및 , 의 배경 요소의 크기에 국한됩니다.

불일치 이유

이 동작은

표준 모드에서는 본질적으로 전체 뷰포트 높이를 차지하지 않습니다. 대신 배경은 요소를 지정하지 않은 채 두면 전체 캔버스에 걸쳐 확장됩니다.

전체 화면 배경 겹치기

이제 배경색과 이미지 오버레이 등 두 개의 전체 화면 배경을 결합하려는 경우 여기를 클릭하세요. 귀하의 선택은 다음과 같습니다:

단일 요소에 배경 결합

사용 배경 약어:

body {
  background: #ddd url(background.png) center top no-repeat;
}

여러 요소의 배경 결합

CSS2 접근 방식:

html {
  height: 100%;
  background: #ddd url(background1.png) repeat;
}

body {
  min-height: 100%;
  background: transparent url(background2.png) center top no-repeat;
}

CSS3 접근법:

body {
  background: url(background2.png) center top no-repeat,
              #ddd url(background1.png) repeat;
}

고려사항

• CSS3에서는 다중 레이어 배경의 맨 아래 레이어만 배경색을 가질 수 있습니다.
• 언급된 동작은 다중 레이어 배경에도 적용됩니다.
• 이전 브라우저 호환성을 위해서는 CSS2 사용을 고려하세요. 접근 방식입니다.

이 동작은

에 HTML 배경 속성을 설정하여 배경이 뷰포트 위로 확장되는 초기 HTML 관행에서 비롯되었다는 점을 기억하세요.

위 내용은 CSS의 HTML과 본문 배경 비교: 전체 화면 배경을 어디에 적용해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!