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

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

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

이전 브라우저 지원

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

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink; 

로그인 후 복사

}

최신 브라우저

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

선형 그라데이션:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

로그인 후 복사