CSS에서 두 가지 색상으로 분할된 배경을 어떻게 만들 수 있나요?

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

" 둘로 나뉜다"; 반대편에 두 가지 색상이 있습니까? 다행히도 브라우저 지원 요구 사항에 따라 이 효과를 얻을 수 있는 방법은 여러 가지가 있습니다.

이전 브라우저 지원

이전 브라우저 지원이 필수인 경우 화면의 절반을 채우고 배경을 설정하는 추가 고정 div를 사용해야 합니다. color.

<pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

}

최신 브라우저

If 최신 브라우저만 걱정하면 됩니다. 옵션:

선형 그라데이션:

<pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

}

다양한 배경 배경 크기:

<pre class="brush:php;toolbar:false">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;

}

둘 다 높이를 100%로 설정하는 것을 잊지 마세요. 배경이 전체 뷰포트를 덮도록 html 및 body 요소를 사용하세요.

위 내용은 CSS에서 두 가지 색상으로 분할된 배경을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!