ブラウザの互換性を考慮して、ウィンドウ幅の 50% を占める 2 色の背景を作成するにはどうすればよいですか?

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

Web 上で 2 つの異なる色に分割される背景を作成しようとしていますこのページでは、background-color プロパティが body タグに使用されており、別のプロパティがウィンドウ全体を含む div に適用されています。ただし、background-size プロパティは IE7/8 と互換性がないため、このソリューションは実用的ではありません。

古いブラウザのサポート

古いブラウザに制限がある場合は、別の div 要素を使用することを検討してください。ページ内で目的の効果を実現するには:

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

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

このアプローチでは、画面の半分をカバーする固定 div を利用し、ユーザーがスクロールしても静止したままになります。他のページ要素を正しく配置するには、Z インデックスの調整が必要になる場合があります。

最新のブラウザ

より最新のサポートを備えたブラウザの場合は、次の代替方法を検討してください。

線形グラデーション:

この手法は最も簡単です。 body 要素の背景プロパティで線形グラデーションを使用すると、さまざまな効果を実現できます。

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

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

背景サイズの複数の背景:

ここでは、背景色がhtml 要素、背景画像が本文に適用されます。次に、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 要素の両方が指定されています。高さは 100% です。これにより、ページ コンテンツがビューポートより短い場合でも、背景がユーザーの画面の高さ全体に広がることが保証されます。一般に、これらの要素の高さを明示的に設定することが良い方法であると考えられています。

以上がブラウザの互換性を考慮して、ウィンドウ幅の 50% を占める 2 色の背景を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。