古いブラウザの互換性を損なうことなく、CSS で幅 50% の背景色を作成するにはどうすればよいですか?

CSS: 幅 50% の背景色を実現する

Web デザインでは、次のように画面の一部のみを覆う背景を作成します。幅の 50% が一般的な要件です。ただし、古いブラウザでサポートされていないメソッドを使用せずにこれを実現するにはどうすればよいでしょうか?という疑問が生じます。この記事では、ウィンドウ幅の 50% をカバーする背景色を適用する別の方法について説明します。

Div を使用した 2 色の背景

背景をサポートしない IE7/8 などのブラウザの場合-size プロパティでは、固定 div 要素を作成することで回避策を採用できます:

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

この div は左上に固定して配置され、画面の半分を背景色で塗りつぶし、2 色の背景の望ましい効果を与えます。必要に応じて背景色を調整します。

最新のブラウザ用の線形グラデーション

古いブラウザのサポートが問題でない場合は、本文の背景プロパティで線形グラデーションを利用できます。

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

この CSS は中間点で 2 つの色を明確に分け、その結果、ある色から次の色にシームレスに移行する背景が得られます。

Background-Size を使用した複数の背景

background-size をサポートするブラウザの場合、HTML 要素の背景色と本文の背景画像を組み合わせることができます:

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

このアプローチでは、単色または単色を使用して、ウィンドウ幅の 50% を覆う背景が生成されます。 image.

注: 全画面背景の確保

すべての例で、html 要素と body 要素の高さを 100% に設定すると、ページが表示されていない場合でも、背景がビューポート全体を覆うようになります。内容は短くなります。これは、全画面背景効果の推奨される方法です。

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