"2 개로 분리 된"페이지에서 배경을 얻으려고 시도합니다. 반대쪽의 두 가지 색상 ( 태그에 기본값 background-color을 설정 한 body다음 div창의 전체 너비를 늘이는 색상에 다른 색상 을 적용하여 수행됨 ).

해결책을 찾았지만 불행히도이 background-size프로젝트의 필수 요소 인 IE7 / 8 에서는 속성이 작동하지 않습니다.

body { background: #fff; }
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

단색에 불과하기 때문에 일반 background-color속성 만 사용하는 방법이 있습니까?

이전 브라우저 지원

이전 브라우저 지원이 필수이므로 여러 배경이나 그라디언트를 사용할 수없는 경우 예비 div요소 에서 다음과 같은 작업을 수행 할 수 있습니다 .

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

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

이 솔루션은 화면의 절반을 채우는 추가 고정 div를 사용합니다. 고정되어 있기 때문에 사용자가 스크롤해도 위치가 유지됩니다. 나중에 다른 요소가 배경 div 위에 있는지 확인하기 위해 일부 z- 색인으로 바이올린을 조정해야 할 수도 있지만 너무 복잡해서는 안됩니다.

문제가있는 경우 나머지 콘텐츠가 배경 요소보다 z- 인덱스가 더 높은지 확인하십시오.

최신 브라우저

최신 브라우저가 유일한 관심사 인 경우 사용할 수있는 몇 가지 다른 방법이 있습니다.

선형 그라디언트 :

이것이 가장 쉬운 해결책입니다. 다양한 효과를 위해 바디의 배경 속성에 선형 그라데이션을 사용할 수 있습니다.

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

이로 인해 각 색상에 대해 50 %의 하드 컷오프가 발생하므로 이름에서 알 수 있듯이 "그라데이션"이 없습니다. 달성 할 수있는 다양한 효과를 보려면 "50 %"스타일로 실험 해보십시오.

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

배경 크기의 여러 배경 :

html요소에 배경색을 적용한 다음 요소에 배경 이미지를 적용 body하고 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요소는 모두 height: 100%후자의 예에서 설정되어 있습니다. 콘텐츠가 페이지보다 작더라도 배경이 사용자의 뷰포트 높이 이상이되도록합니다. 명시적인 높이가 없으면 배경 효과는 페이지 내용까지만 내려갑니다. 또한 일반적으로 좋은 습관입니다.

"2로 분할"배경을 달성하는 간단한 솔루션 :

background: linear-gradient(to left, #ff0000 50%, #0000ff 50%);

방향을 각도로 사용할 수도 있습니다

background: linear-gradient(80deg, #ff0000 50%, #0000ff 50%);

두 번째 색상을 0 %로 설정하여 선형 그라디언트 대신 딱딱한 구별을 만들 수 있습니다

예를 들어

그라디언트- background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

어려운 구별- background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

따라서 이것은 이미 받아 들여진 대답이있는 끔찍한 오래된 질문이지만이 답변은 4 년 전에 게시 된 경우 선택되었을 것이라고 생각합니다.

CSS와 EXTRA DOM ELEMENTS를 사용 하여이 문제를 완전히 해결했습니다! 즉, 두 가지 색상은 순전히 두 가지의 배경색이 아닌 하나의 요소의 배경색입니다.

나는 그라디언트를 사용했고, 색상 정지 점을 너무 가깝게 설정했기 때문에 색상이 독특하고 혼합되지 않는 것처럼 보입니다.

기본 구문의 그라디언트는 다음과 같습니다.

background: repeating-linear-gradient(#74ABDD, #74ABDD 49.9%, #498DCB 50.1%, #498DCB 100%);

색상 #74ABDD은에서 시작하여 0%여전히 #74ABDD있습니다 49.9%.

그런 다음 그라디언트가 0.2%요소 높이 내에서 다음 색상으로 이동 하여 두 색상 사이에 매우 단색 인 것처럼 보입니다.

결과는 다음과 같습니다.

그리고 여기 내 JSFiddle이 있습니다!

즐기세요!

이것은 순수한 CSS와 함께 작동해야합니다.

background: -webkit-gradient(linear, left top, right top, color-stop(50%,#141414), color-stop(50%,#333), color-stop(0%,#888));

Chrome에서만 테스트되었습니다.

과거에 IE8 +를 지원해야했던 프로젝트에서 data-url 형식으로 인코딩 된 이미지를 사용하여이를 달성했습니다.

이미지는 2800x1px, 이미지의 절반은 흰색, 절반은 투명했습니다. 꽤 잘 작동했습니다.

body {
    /* 50% right white */
    background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAOSURBVHgBYxhi4P/QAgDwrK5SDPAOUwAAAABJRU5ErkJggg==) center top repeat-y;

   /* 50% left white */
   background: red url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAACvAAAAABAQAAAAAqT0YHAAAAAnRSTlMAAHaTzTgAAAAPSURBVHgBY/g/tADD0AIAIROuUgYu7kEAAAAASUVORK5CYII=) center top repeat-y;
}

JsFiddle에서 작동하는 것을 볼 수 있습니다 . 그것이 누군가를 도울 수 있기를 바랍니다.)

나는 :after그것을 사용했으며 모든 주요 브라우저에서 작동하고 있습니다. 링크를 확인하십시오. 이후 위치가 절대적 인 것처럼 z- 인덱스에주의해야합니다.

<div class="splitBg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
        </div>
        <div style="float:left; width:50%; position:relative; z-index:10;">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, 
        </div>
        <div style="clear:both;"></div>
    </div>
</div>`
css

    .splitBg{
        background-color:#666;
        position:relative;
        overflow:hidden;
        }
    .splitBg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;
        content:"";
        display:block;
        height:100%;
        background-color:#06F;
        z-index:1;
        }

바이올린 링크

:after의사 선택기를 사용하여 이를 달성 할 수는 있지만 해당 선택기의 이전 버전과의 호환성은 확실하지 않습니다.

body {
    background: #000000
}
body:after {
    content:'';
    position: fixed;
    height: 100%;
    width: 50%;
    left: 50%;
    background: #116699
}

이것을 사용하여 페이지 배경에 두 가지 다른 그라디언트를 사용했습니다.

이미지에 사용 bg

수직 분할

background-size: 50% 100%

수평 분할

background-size: 100% 50%

예

.class {
   background-image: url("");
   background-color: #fff;
   background-repeat: no-repeat;
   background-size: 50% 100%;
}

div 안에 한 줄을 입력하기 위해 문제를 구현하는 방법 중 하나입니다.

background-image: linear-gradient(90deg, black 50%, blue 50%);

데모 코드 및 추가 옵션 (가로, 대각선 등)은 "Run code snippet"을 클릭하여 실시간으로 볼 수 있습니다.

.abWhiteAndBlack
{
  background-image: linear-gradient(90deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack2
{
  background-image: linear-gradient(180deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

.abWhiteAndBlack3
{
  background-image: linear-gradient(45deg, black 50%, blue 50%);
  height: 300px;
  width: 300px;
  margin-bottom: 80px;
}

Vertical:

  <div class="abWhiteAndBlack">
  </div>


Horizonal:

  <div class="abWhiteAndBlack2">
    
  </div>


Diagonal:

  <div class="abWhiteAndBlack3">
    
  </div>

가장 방탄적이고 의미 적으로 올바른 옵션은 고정 위치 의사 요소 ( ::after또는 ::before)를 사용하는 것입니다. 이 기술을 사용 z-index하면 컨테이너 내부의 요소 로 설정 하는 것을 잊지 마십시오 . 또한 content:""의사 요소에 대한 규칙이 필요합니다. 그렇지 않으면 렌더링되지 않습니다.

#container {...}

#content::before {
    content:"";
    background-color: #999;
    height: 100%;
    left: 0px;
    position: fixed;
    top: 0px;    
    width: 50%; 
    z-index: 1;
}


#content * {
  position: relative;
  z-index:2;
}

실제 예 : https://jsfiddle.net/xraymutation/pwz7t6we/16/

이것은 대부분의 브라우저에서 작동하는 예입니다.
기본적으로 두 가지 배경색을 사용합니다. 첫 번째는 0 %에서 시작하여 50 %에서 끝나고 두 번째는 51 %에서 시작하여 100 %에서 끝납니다.

가로 방향을 사용하고 있습니다.

background: #000000;
background: -moz-linear-gradient(left,  #000000 0%, #000000 50%, #ffffff 51%, #ffffff 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#000000), color-stop(50%,#000000), color-stop(51%,#ffffff), color-stop(100%,#ffffff));
background: -webkit-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -o-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: -ms-linear-gradient(left,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
background: linear-gradient(to right,  #000000 0%,#000000 50%,#ffffff 51%,#ffffff 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#ffffff',GradientType=1 );

다른 조정을 위해 http://www.colorzilla.com/gradient-editor/를 사용할 수 있습니다

linear-gradient높이의 50 % 로 사용하려는 경우 :

background: linear-gradient(to bottom, red 0%, blue 100%) no-repeat;
background-size: calc(100%) calc(50%);
background-position: top;