CSS에서 한 가지 색상이 창 너비의 50%를 차지하는 두 가지 색상의 배경을 어떻게 만들 수 있습니까?

CSS: 배경색을 창 너비의 50%로 설정

문제:

페이지 배경을 두 개로 분할하는 방법을 찾고 있습니다. 한 색상이 창 너비의 50%를 차지합니다.

해결책:

이전 브라우저 지원

레거시 브라우저 지원이 필수적인 경우(예: IE7/8) 전용 div 요소 활용을 고려하세요. 원하는 효과를 얻으려면:

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

고정 위치에 있는 div는 화면의 절반을 채우고 스크롤하는 동안 제자리에 유지됩니다.

최신 브라우저

최신 브라우저의 경우 몇 가지 대체 방법이 있습니다. 사용 가능:

선형 그라데이션

본체의 배경 속성에서 선형 그라데이션을 활용하면 간단한 솔루션이 제공됩니다.

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

이렇게 하면 색상 간 50%의 선명한 구분 mark.

배경 크기가 있는 다중 배경

html 요소에 배경색 지정 및 50% 배경 크기 설정으로 배경 이미지 적용 body 요소에 대해서도 비슷한 결과가 나옵니다. 결과:

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

참고: 후자의 예에서는 페이지 콘텐츠 높이에 관계없이 배경이 전체 뷰포트에 걸쳐 있도록 html과 본문 모두에 대해 height: 100%가 설정됩니다.

위 내용은 CSS에서 한 가지 색상이 창 너비의 50%를 차지하는 두 가지 색상의 배경을 어떻게 만들 수 있습니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!