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

単一 div の複数の背景色

特定のシナリオでは、背景画像や追加の背景色を使用するよりも、div に複数の背景色を適用する方が有利です。ディビジョンCSS には、この効果を実現するさまざまな方法が用意されています。

1. 2 色以上の線形グラデーション:

画像に示すように、2 色で「A」を作成するには、4 つの位置の線形グラデーションを使用します:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #f6f6f6 50%, #f6f6f6 100%);

2. 「C」のより小さい部分の作成:

「C」の場合、「A」と同様の線形グラデーションを使用しますが、白い背景の :after セレクターを追加して、より小さい青色の部分をシミュレートします。

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
.c:after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 20%;
    background-color: white;
}

「C」の改善された代替案:

前の解決策では、白い部分と重なる効果が作成されます。より良い代替方法は、「background-clip」プロパティを使用することです。これにより、背景を指定した形状にクリップできます:

background: linear-gradient(to right, #9c9e9f 0%, #9c9e9f 50%, #33ccff 50%, #33ccff 100%);
background-clip: border-box;

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