CSSを使用して1つのDivで複数の背景色を実現するにはどうすればよいですか?

1 つの Div で複数の背景色を実現する

CSS では、さまざまな手法を使用して 1 つの Div に複数の背景色を適用できます。さまざまなシナリオでいくつかのオプションを検討してみましょう。

シナリオ 1: 2 つの等しい部分を持つ div

それぞれが異なる色の線形の 2 つの等しい部分を持つ div を作成するにはグラデーションを使用できます。たとえば、画像の「A」に示されている効果を実現するには、次の CSS を使用できます:

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

このグラデーションは 4 つの位置を使用して色の遷移を指定します。 1 番目と 2 番目の位置は 0% ～ 50% の濃い灰色を定義し、3 番目と 4 番目の位置は 50% ～ 100% の明るい灰色を定義します。

シナリオ 2: 等しくない除算部分

高さの異なる部分を含む div を作成するには、線形グラデーションと擬似要素を組み合わせます。たとえば、画像の「C」に示されている、青い部分の高さが他の部分よりも小さい効果を実現するには、次の CSS を使用します。

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;
}

このシナリオでは、擬似要素(:after)がdivに追加されます。この要素は、「小さい」青色の部分として機能します。これは div の右下隅に絶対に配置され、幅 50%、高さ 20% になります。背景色は白に設定され、青い部分をオーバーレイして目的の効果を実現します。

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