單一DIV上的多種背景顏色

實現DIV元素的顏色分割

要將一個DIV 元素分成多個顏色部分，請調整數量線性漸層中的顏色停止值。例如，建立兩個部分需要三種顏色，而建立四個部分則需要四種顏色。透過指定每種顏色過渡發生的百分比，您可以建立所需的顏色劃分。

控制顏色部分大小

使一個部分小於其他的，使用 CSS :after 偽元素。此元素建立一個可以獨立調整大小和位置的覆蓋層。將對比背景顏色應用於 :after 元素會產生較小顏色部分的錯覺，而無需物理劃分 DIV。

以下是具有更好的跨瀏覽器支援的改進範例：

;一個。兩個顏色部分

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

登入後複製

B.三種顏色部分

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