CSS技巧！制作半色背景页面部分的 2 种方法

在本教程中，您将学习两种将页面部分的背景拆分为两种颜色的方法。

在这里，我们分为三个部分：

• 第一部分和第三部分包括一个标题和一些虚拟文本。
• 第二部分包含三张卡片。

我们想要的是，根据布局，为第二部分的一半背景着色。

方法 1 – 使用渐变

创建分色背景的最快方法是通过线性渐变。以下样式就足够了;我们只需要根据布局设置正确的色标（默认情况下，线性渐变从上到下）：

/*CUSTOM VARIABLES HERE*/
.section-second {
    background: linear-gradient(var(--bg) 50%, transparent 50%);
}

方法 2 – 使用伪元素

将截面的背景色划分为两种颜色的另一种方法是指定伪元素并将其高度设置为等于截面的半高。然后，根据我们想要放置它的位置，我们将其高度设置为 或 。top: 0，bottom: 0

以下是利用 CSS 嵌套后我们需要的样式：

/*CUSTOM VARIABLES HERE*/
.section-second {
  position: relative;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    /*bottom: 0;*/
    left: 0;
    right: 0;
    height: 50%;
    z-index: -1;
    background: var(--bg);
  }
}

结论

在这个简短的教程中，我们讨论了两种简单的方法，将页面部分的背景垂直拆分为两种颜色。显然，如果您需要水平修改背景，则概念保持不变。