如何使用 CSS 渐变将多种背景颜色应用到单个 Div？

对单个div应用多种背景颜色

为了在单个div中实现多种背景颜色，CSS提供了支持线性的bac​​kground属性梯度。以下是如何实现您所描述的场景：

场景 1：创建分离颜色的 Div (A)

创建具有分离背景的 div （类似于图像中的“A”），使用具有四个色标的线性渐变：

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

场景 2：使一个部分小于另一部分 (C)

在“C”场景中，您希望使蓝色部分的高度更小。这可以通过使用 :after 伪元素和白色背景来实现：

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%; /* Adjust this value to control the height of the blue portion */
  background-color: white;
}

注意：为了更好的跨浏览器兼容性，请考虑使用背景属性的供应商前缀如所提供的代码片段中所示。

以上是如何使用 CSS 渐变将多种背景颜色应用到单个 Div？的详细内容。更多信息请关注PHP中文网其他相关文章！