HTML과 본문 요소 배경이 CSS에서 어떻게 상호 작용하며, 전체 화면 배경을 어떻게 얻을 수 있습니까?

페이지에 배경 적용

HTML 및 CSS로 작업할 때 페이지에 배경을 적용하면 예상치 못한 결과가 발생할 수 있습니다. 기본적으로 본문 요소에 적용된 배경은 본문 내용의 실제 크기에 관계없이 전체 페이지를 덮도록 확장됩니다. 그러나 배경이 HTML 요소에도 적용되면 이 동작이 변경됩니다.

예상 동작

표준 모드에서는 HTML과 body 요소 모두 처음에 전체 뷰포트 높이를 높입니다. HTML 요소에 배경이 적용되지 않으면 본문에서 배경을 상속합니다. 그러나 배경이 HTML 요소에 적용되면 이 메커니즘이 깨지고 두 요소의 배경은 정의된 영역을 따릅니다.

배경 결합

두 개의 전체 화면 배경(예: 배경색 및 반투명 이미지)을 겹치는 경우 본문 또는 HTML 요소를 단일로 사용할 수 있습니다. 컨테이너.

단일 요소 접근 방식:

배경 단축 속성을 사용하여 하나의 요소 내에서 배경색과 배경 이미지를 결합합니다.

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

다중 요소 접근 방식 (CSS2):

1. HTML 요소에 배경 이미지를 설정합니다.
2. 투명한 배경 이미지를 body 요소에 원하는 높이와 최소 높이로 설정합니다. 뷰포트.

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;
}

브라우저 지원

배경 전파 메커니즘은 단일 요소 접근 방식과 다중 요소 접근 방식 모두에 적용됩니다. 그러나 이전 브라우저와의 호환성을 위해 IE7부터 다시 지원되는 CSS2 방식을 사용하는 것이 좋습니다.

위 내용은 HTML과 본문 요소 배경이 CSS에서 어떻게 상호 작용하며, 전체 화면 배경을 어떻게 얻을 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!