HTML `` 및 `` 배경은 어떻게 다르며, 여러 배경을 효과적으로 사용할 수 있는 방법은 무엇입니까?

에 배경 적용 및/또는

또는 요소에서 동작의 불일치를 발견할 수 있습니다. 요소인 경우 전체 페이지를 포함하는 반면 요소의 배경은 콘텐츠가 표시되는 영역으로 제한됩니다.

왜 불일치합니까?

표준 모드에서는 및 요소는 본질적으로 뷰포트의 높이를 채우지 않습니다. 그러나 요소는 명시적으로 정의되지 않은 경우 요소의 배경색입니다. 이후에 이 상속된 배경은 전체 뷰포트를 덮는 캔버스 배경이 됩니다.

여러 배경 겹쳐놓기

겹쳐진 배경 효과를 얻으려면 단일 요소에 두 개의 배경 속성을 결합합니다(예: < 본문>)을 권장합니다. background-image 및 background-color 속성 또는 배경 단축 속성을 사용하면 원활한 병합이 가능합니다.

예를 들어, 단색 배경색 위에 투명한 배경 이미지를 겹치려면 다음을 사용하세요.

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

위 내용은 HTML `` 및 `` 배경은 어떻게 다르며, 여러 배경을 효과적으로 사용할 수 있는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!