我希望背景在svg下方有不同的颜色，在svg上方有不同的颜色，我设置为背景，我怎样才能实现这一点？

Question

我想在 svg 下面有一个单独的背景颜色，在 svg 上面有一个单独的背景颜色。 请注意，我已经为 body 元素设置了背景图像，并且我将在其上方使用网格布局，并将背景颜色设置为透明。

我尝试使用实心线性渐变作为背景颜色，但这会覆盖 svg 图像。我希望 svg 图像位于背景颜色的顶部。

如果可以将背景颜色设置为像这样的线性渐变。它看起来与我希望的结果类似

body {
  background-color: linear-gradient(
    to bottom,
    var(--color-background-primary-light) 0%,
    var(--color-background-primary-light) 40%,
    var(--color-background-primary-dark) 40%,
    var(--color-background-primary-dark) 100%
  );
  background-image: url("/images/bg-curvy-desktop.svg");
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50% 30%;
}

这是我试图重新创建的设计。

Answer 1

我通过在 html 中使用 svg 并使用 svg 图像的这些属性来修复它。

.curve {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-background-primary-dark);
  mask-image: url(../../images/bg-curvy-desktop.svg);
  mask-size: cover;
  z-index: -1;
}

然后在我实现的部分

.section-header {
  position: relative;
}

这是 HTML 代码

<div class="grid__container">
      <nav class="grid__child grid__child--nav">NAVIGATION</nav>
      <header class="grid__child grid__child--header section-header">
        <img
          class="curve"
          src="./images/bg-curvy-desktop.svg"
          alt="background-image"
        />
      </header>
      <section class="grid__child grid__child--features">FEATURES</section>
      <section class="grid__child grid__child--about">ABOUT</section>
      <section class="grid__child gird__child--reviews">REVIEWS</section>
      <section class="grid__child grid__child--cta">CALL TO ACTION</section>
      <footer class="grid__child grid__child--footer">FOOTER</footer>
    </div>