单个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中文网其他相关文章！