単一 DIV での複数の背景色

DIV 要素での色の分割の実現

DIV 要素を複数の色に分割するにはセクションで、線形グラデーションのカラーストップ値の数を調整します。たとえば、2 つのセクションを作成するには 3 色が必要ですが、4 つのセクションには 4 色が必要です。各色の遷移が発生するパーセンテージを指定することで、目的の色分割を作成できます。

カラーセクションサイズの制御

1 つのセクションをサイズより小さくするにはそれ以外の場合は、CSS :after 疑似要素を使用します。この要素は、サイズと位置を個別に変更できるオーバーレイを作成します。 :after 要素に対照的な背景色を適用すると、DIV を物理的に分割することなく、色のセクションが小さくなったような錯覚が生まれます。

クロスブラウザのサポートが向上した改良例を次に示します。

;A. 2 つのカラーセクション

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

ログイン後にコピー

B. 3 つのカラーセクション

.three-colors {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 33%,
    #f6f6f6 33%,
    #f6f6f6 66%,
    #33ccff 66%,
    #33ccff 100%
  );
}

ログイン後にコピー

C.小さい青色のセクション

.smaller-blue {
  background: linear-gradient(
    to right,
    #9c9e9f 0%,
    #9c9e9f 50%,
    #33ccff 50%,
    #33ccff 100%
  );
  position: relative;
}

.smaller-blue:after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 25%;
  height: 20%;
  background-color: white;
}

ログイン後にコピー

これらの例は、単一の DIV 要素で複数の背景色を実現し、:after 疑似要素を使用してそのサイズを制御する方法を示し、複雑な色を設計するための汎用性の高い方法を提供します。追加の HTML 要素を必要とせずにパターンを作成できます。

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