CSS3 で複数の背景色を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

CSS3 で複数の背景色を作成するにはどうすればよいですか?

Patricia Arquette

リリース： 2024-11-09 01:50:02

オリジナル

637 人が閲覧しました

How Can I Create Multiple Background Colors in CSS3?

CSS3 での複数の背景色のカスタマイズ

CSS3 では、要素に複数の背景色を適用する機能など、開発者が高度なカスタマイズオプションを利用できるようになります。 CSS3 では、単一の色に制限されるのではなく、複数の色や画像を組み合わせることができる階層化アプローチが可能です。

提供されたコードスニペットに示されているように、特定の色に別の色を指定することができます。追加の

に頼ることなく、要素の幅のセクションを分割します。要素。背景サイズプロパティをパーセンテージに設定すると、色付き領域の幅を定義できます。

複数の背景色とサイズを使用したコードスニペットの更新版を次に示します。

div#content {
  background: url("./gray.png") repeat-y,
              linear-gradient(to right, RGB(0, 0, 0), RGB(255, 255, 255)),
              RGB(110, 175, 233);
  background-size: 30%, 100% 30%, 100% 30%;
}

ログイン後にコピー

このコードは 3 つの背景レイヤーを定義します: 繰り返しの灰色の画像、黒から白にフェードする垂直グラデーション、および単色です。 Linear-gradient() 関数を使用すると、2 つの色間のシームレスな移行が可能になります。 background-size プロパティでパーセンテージを指定すると、色付きの領域が要素の幅の 30% を占めます。

CSS3 の出現により、Web 開発者は背景要素のスタイルを比類のない柔軟性を持つようになりました。複数の色や画像を適用できるため、視覚的に魅力的でダイナミックな Web ページを作成する無限の可能性が広がります。

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