CSS グラデーションを使用して単一の Div に複数の背景色を適用する方法

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

単一の Div 内で複数の背景色を実現するために、CSS は線形をサポートする背景プロパティを提供しますグラデーション。ここで説明したシナリオを実装する方法は次のとおりです。

シナリオ 1: 分割色の Div を作成する (A)

分割された背景を持つ Div を作成するには(画像の「A」に似ています)、4 色の線形グラデーションを使用します。 stop:

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

シナリオ 2: ある部分を他の部分より小さくする (C)

「C」シナリオでは、青色の部分を作成します。高さが小さい。これは、白い背景とともに :after 疑似要素を使用することで実現できます:

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%; /* Adjust this value to control the height of the blue portion */
  background-color: white;
}

注: ブラウザ間の互換性を高めるには、background プロパティにベンダー プレフィックスを使用することを検討してください。提供されたコード スニペットに見られるように。

以上がCSS グラデーションを使用して単一の Div に複数の背景色を適用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。