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

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

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

古いブラウザのサポート

古いブラウザのサポートが必須の場合は、画面の半分を埋めて背景を設定する追加の固定 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; 

ログイン後にコピー

}

最新のブラウザ

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

線形グラデーション:

<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%);

ログイン後にコピー