CSS で 2 色の分割背景を作成するにはどうすればよいですか?

CSS: ウィンドウの 50% の背景色を設定します

ページの背景を「 2つに分割します。」反対側に2色？幸いなことに、ブラウザのサポート要件に応じて、この効果を実現する方法が複数あります。

古いブラウザのサポート

古いブラウザのサポートが必須の場合は、画面の半分を埋めて背景を設定する追加の固定 div を使用する必要がありますcolor.

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

}

最新のブラウザ

の場合新しいブラウザだけが心配で、もっと多くのことがありますオプション:

線形グラデーション:

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

}

複数の背景背景サイズ:

</p>
<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 で 2 色の分割背景を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。