「2つに分割」されているページの背景を取得しようとしています。反対側の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要素に背景色を適用してから、要素にbackground-imageを適用しbody、background-sizeプロパティを使用してページ幅の50％に設定できます。これは同様の効果をもたらしますが、実際には1つまたは2つの画像を使用している場合にのみ、グラデーションに対してのみ使用されます。

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/

EXTRA注：両方のことに注意htmlし、body要素に設定されheight: 100%、後者の例で。これは、コンテンツがページよりも小さい場合でも、背景が少なくともユーザーのビューポートの高さになるようにするためです。明示的な高さがなければ、背景効果はページコンテンツまでしか下がりません。また、これは一般的に単なる良い習慣です。

「2つに分割」するバックグラウンドを実現するシンプルなソリューション：

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

方向として度を使用することもできます

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

2番目の色を0％にすることで、線形グラデーションの代わりに明確な区別を行うことができます

例えば、

グラデーション- background: linear-gradient(80deg, #ff0000 20%, #0000ff 80%);

明確な区別- background: linear-gradient(80deg, #ff0000 20%, #0000ff 0%);

ですから、これはひどく古い質問で、すでに受け入れられた回答がありますが、4年前に投稿された場​​合、この回答が選択されたと思います。

私はこれを純粋にCSSで解決し、余分なDOM要素はありませんでした！つまり、2つの色は純粋に1つの要素の背景色であり、2つの背景色ではありません。

グラデーションを使用しましたが、色のストップを非常に接近して設定しているため、色が明確で混ざり合っていないように見えます。

これがネイティブ構文の勾配です：

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

色#74ABDDから始まり0%、まだある#74ABDDで49.9%。

次に、グラデーションを0.2%要素の高さ内の次の色に強制的にシフトし、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
}

これを使用して、ページの背景に2つの異なるグラデーションを設定しました。

画像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内に1行を入力する方法の1つ：

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

デモコードとその他のオプション（水平、斜めなど）を以下に示します。[コードスニペットの実行]をクリックすると、ライブで表示されます。

.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/

これは、ほとんどのブラウザで機能する例です。
基本的に2つの背景色を使用します。1つ目は0％から始まり50％で終わり、2つ目は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;