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

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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

もっと見る

人気の記事

KB5055612を修正する方法Windows 10にインストールできませんか？

4週間前 By DDD

<🎜>：庭を育てる - 完全な突然変異ガイド

3週間前 By DDD

<🎜>：バブルガムシミュレーターインフィニティ - ロイヤルキーの取得と使用方法

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

Nordhold：Fusion System、説明

4週間前 By 尊渡假赌尊渡假赌尊渡假赌

マンドラゴラ：魔女の木のささやき - グラップリングフックのロックを解除する方法

3週間前 By 尊渡假赌尊渡假赌尊渡假赌

もっと見る

ホットツール

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

もっと見る

ホットトピック

Java チュートリアル

1670

14

CakePHP チュートリアル

1428

52

Laravel チュートリアル

1329

25

PHP チュートリアル

1276

29

C# チュートリアル

1256

24

もっと見る