CSS でウィンドウ幅 50% の背景色分割を作成する方法-CSSチュートリアル-php.cn

CSS でウィンドウ幅 50% の背景色分割を作成する方法

Barbara Streisand

リリース： 2024-12-13 20:22:12

オリジナル

281 人が閲覧しました

How to Create a 50% Window-Width Background Color Split in CSS?

CSS: ウィンドウ幅の 50% の背景色を実現する

Web 開発では、異なる特徴を備えた半分に分割された背景を作成する必要が生じることがあります。反対側の色。従来、この効果は、にデフォルトの背景色を設定することで実現されてきました。タグと

のオーバーレイ

background-size サポートに関する課題

背景を分割する 1 つの方法は、background-size プロパティを使用することです。背景画像のサイズ。次のコードスニペットはこの方法の例です:

body {
    background: #fff;
}
#wrapper {
    background: url(1px.png) repeat-y;
    background-size: 50% auto;
    width: 100%;
}

ログイン後にコピー

ただし、Internet Explorer 7/8 との互換性が必要なプロジェクトでは、これらのブラウザーは背景サイズのプロパティをサポートしていないため、このソリューションは実行できません。

専用の Div 要素を使用した解決策

古いブラウザの場合、別のアプローチとして、別の

を作成します。固定位置の要素:

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

ログイン後にコピー

この固定 div は、ページがスクロールしている間静止したままになり、目的の分割背景効果を作成します。

最新のブラウザー用のオプション

最新のブラウザをサポートするプロジェクトでは、追加のテクニックを使用できます:

Linearグラデーション:

線形グラデーションを使用すると、背景を簡単に分割できます。の背景プロパティで線形グラデーションを使用すると、各色に対して 50% のハードカットオフを作成できます:

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

ログイン後にコピー

background-size の複数の背景:

このメソッドには、に背景色を適用することが含まれます。要素を使用してから、を使用します。背景サイズをページ幅の 50% に設定した背景画像:

html {
    height: 100%;
    background-color: cyan;
}

body {
    height: 100%;
    background-image: url('background.jpg');
    background-repeat: repeat-y;
    background-size: 50% auto;
}

ログイン後にコピー

補足

背景がビューポート全体を確実に覆うように、両方の高さを設定することをお勧めします。そして

要素を 100% にします。これにより、ページのコンテンツが短くても、背景がユーザーのビューポートまで広がることが保証されます。

以上がCSS でウィンドウ幅 50% の背景色分割を作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース：php.cn

前の記事：jQueryを使用してDivの背景画像のサイズを取得する方法? 次の記事：CSS 変換後に Chrome テキストがぼやけるのはなぜですか?どうすれば修正できますか?

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

著者別の最新記事