ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS でウィンドウ幅 50% の背景色分割を作成する方法
CSS でウィンドウ幅 50% の背景色分割を作成する方法
- Barbara Streisandオリジナル
- 2024-12-13 20:22:12243ブラウズ
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 サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。