브라우저 호환성을 고려하여 창 너비의 50%를 차지하는 두 가지 색상의 배경을 만들려면 어떻게 해야 합니까?

CSS: 창 너비의 50%를 차지하는 배경색 설정

웹에서 서로 다른 두 가지 색상으로 분할되는 배경을 만들려는 시도 페이지에서는 body 태그에 background-color 속성이 사용되었고 창 전체를 둘러싸는 div에는 다른 속성이 적용되었습니다. 그러나 background-size 속성은 IE7/8과 호환되지 않으므로 이 솔루션은 실용적이지 않습니다.

이전 브라우저 지원

이전 브라우저에 제한이 있는 경우 별도의 div 요소를 사용하는 것이 좋습니다. 페이지 내에서 원하는 효과를 얻으려면:

#background {
    position: fixed;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: pink; 
}

예: http://jsfiddle.net/PLfLW/1704/

이 접근 방식은 화면의 절반을 덮고 사용자가 스크롤하더라도 고정된 상태를 유지하는 고정 div를 활용합니다. 다른 페이지 요소가 올바르게 배치되도록 하려면 Z-색인에 대한 일부 조정이 필요할 수 있습니다.

최신 브라우저

최신 지원 기능을 갖춘 브라우저의 경우 다음 대체 방법을 고려하세요.

선형 그라데이션:

이 기술은 가장 간단합니다. body 요소의 배경 속성에 선형 그라데이션을 사용하면 다양한 효과를 얻을 수 있습니다.

body {
    height: 100%;
    background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
}

예: http://jsfiddle.net/v14m59pq/2/

배경 크기가 있는 여러 배경:

여기서 배경색이 지정됩니다. html 요소에는 배경 이미지가 적용되고 본문에는 배경 이미지가 적용됩니다. 그런 다음 background-size 속성을 사용하여 이미지 너비를 페이지의 50%로 설정합니다:

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('http://i.imgur.com/9HMnxKs.png');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

예: http://jsfiddle.net/6vhshyxg/2/

추가 참고 사항:

최신 브라우저의 예에서 html 및 body 요소는 둘 다 높이가 100%로 지정되어 있습니다. 이렇게 하면 페이지 콘텐츠가 뷰포트보다 짧더라도 배경이 사용자 화면의 전체 높이까지 확장됩니다. 일반적으로 이러한 요소에 대해 명시적인 높이를 설정하는 것이 좋습니다.

위 내용은 브라우저 호환성을 고려하여 창 너비의 50%를 차지하는 두 가지 색상의 배경을 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!