CSS で 1 つの色がウィンドウ幅の 50% を占める 2 色の背景を作成するにはどうすればよいですか?

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

問題:

ページの背景を 2 つの異なる色に分割する方法を探しています。 1 つの色がウィンドウの幅の 50% を占めています。

解決策:

古いブラウザのサポート

次のような場合従来のブラウザのサポートは不可欠です (IE7/8 など)。目的の効果を実現する専用の div 要素:

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

固定的に配置された div は画面の半分を占め、スクロール中もその位置に残ります。

最新のブラウザ

最新のブラウザの場合、いくつかの代替方法があります。利用可能:

線形グラデーション

ボディの背景プロパティで線形グラデーションを活用すると、簡単な解決策が得られます:

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

これにより、 50% での色間の明確な分割mark.

background-size を使用した複数の背景

HTML 要素に背景色を割り当て、background-size が 50% に設定された背景画像を適用するbody 要素に同様の結果が得られますresult:

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;
}

注: 後者の例では、ページ コンテンツの高さに関係なく、背景がビューポート全体に広がるように、html と body の両方に高さ: 100% が設定されています。

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