単一の Div に複数の背景色を適用するにはどうすればよいですか?

単一の div に複数の背景色を適用する

状況によっては、単一の div に複数の背景色を適用すると便利な場合があります。これにより、追加の div や背景画像が不要になり、視覚的に魅力的で簡単なタスクになります。

シナリオ 1: 均一な 2 色の分割を達成する

提供された画像の「A」に似た単純な 2 色の分割では、線形グラデーションを次のように使用できます。

div.A {
  background: linear-gradient(to right, #9c9e9f, #f6f6f6);
}

ただし、このアプローチでは、「A」に見られるような鮮明な色の変化のないグラデーションが生じる可能性があります。これを修正するには、4 つの位置のグラデーションを使用し、最初の色 (濃い灰色) を 0% から 50% に割り当て、2 番目の色 (薄い灰色) を 50% から 100% に割り当てます。

div.A {
  background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#f6f6f6 50%,#f6f6f6 100%);
}

シナリオ 2: 複数の背景色のサイズを制御する

分割では、「C」の青いセクションと同様に、4 つの位置で同様の線形グラデーションを使用できますが、背景が白の :after セレクターを追加して、より小さい 2 番目のセクションをシミュレートします。

div.C {
  background: linear-gradient(to right,  #9c9e9f 0%,#9c9e9f 50%,#33ccff 50%,#33ccff 100%);
}

div.C:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 50%;
  height: 20%;
  background-color: white;
}

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