如何用CSS實作單一div內多種背景顏色？

單一div 的多種背景顏色

在某些情況下，將多種背景顏色應用於div 比使用背景圖像或附加內容更有優勢分割區。 CSS提供了多種方法來實現這種效果。

1.兩種或多種顏色的線性漸變：

要使用兩種顏色創建“A”，如圖所示，請使用具有四個位置的線性漸層：

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中文網其他相關文章！