使用CSS填充背景——两种不同的颜色并且有一个覆盖另一个

Question

我能否只使用CSS（而不是图像作为背景）创建这样的填充，该如何实现？

我指的是 - 我有两个填充了不同颜色的div，但我只能用普通颜色来填充它们，但我需要一个“重叠”的部分。

也许我需要两个div，并用background-color来填充它们，第三个div用“两种重叠的”背景颜色。然而，我不知道如何创建这个重叠部分。

- renathy

---

我在工作场所无法看到图片，但你需要 CSS 渐变吗？https://developer.mozilla.org/zh-CN/docs/Web/CSS/linear-gradient - imGaurav

我不确定我理解了你的问题。你想让两个div重叠，并且重叠部分作为重叠颜色？所以如果你有一个紫色和一个黑色的div，重叠的颜色应该是紫色/黑色混合色吗？ - benscabbia

@renathy：一开始我没有添加linear-gradients标签，因为我不确定这是否是您想要的。希望您现在对标签的添加没有任何疑虑。如果您有任何问题，请随时回滚。 - Harry

Answer 1

当然，您可以使用多个元素并重叠它们来完成此操作，但最简单的方法是像下面的片段中使用带有角度的线性渐变作为背景。将第一个颜色的色彩停止点作为第二个颜色的起始点，使得渐变输出看起来像两种实心颜色，而不是从一种颜色逐渐过渡到另一种颜色。（注意：我在第二个颜色的颜色开始处添加了0.5％的增量，因为角度渐变通常会产生锯齿状的边缘，这样可以避免这种情况。）

.two-colors {
  height: 75px;
  width: 400px;
  background-image: linear-gradient(135deg, blue 60%, black 60.5%);
}

<div class='two-colors'></div>

- Harry