コミュニティ

学ぶ

ツールライブラリ

AIツール

レジャー

日本語

ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS で 2 色の分割背景を作成するにはどうすればよいですか?

CSS で 2 色の分割背景を作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-12-01 01:04:10

オリジナル

304 人が閲覧しました

How Can I Create a Two-Colored Split Background in CSS?

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

ページの背景を「 2つに分割します。」反対側に2色？幸いなことに、ブラウザのサポート要件に応じて、この効果を実現する方法が複数あります。

古いブラウザのサポート

古いブラウザのサポートが必須の場合は、画面の半分を埋めて背景を設定する追加の固定 div を使用する必要がありますcolor.

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">position: fixed;
top: 0;
left: 0;
width: 50%;
height: 100%;
background-color: pink;

ログイン後にコピー

}

最新のブラウザ

の場合新しいブラウザだけが心配で、もっと多くのことがありますオプション:

線形グラデーション:

<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">height: 100%;
background: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);

ログイン後にコピー

}

複数の背景背景サイズ:

</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">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;

ログイン後にコピー

}

高さを 100% に設定することを忘れないでくださいhtml 要素と body 要素の両方で、背景がビューポート全体をカバーするようにします。

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

前の記事：jQuery の `addClass()` と `removeClass()` を使用して、一度に 1 つのリスト項目だけを強調表示する方法は? 次の記事：画像を使用せずに HTML で三角形の矢印を作成するにはどうすればよいですか?

このウェブサイトの声明

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

著者別の最新記事