给定这种图像，我怎样才能实现像CSS中那样的背景？

Question

我刚刚学习 HTML 和 CSS。所以，我得到了一个设计，但我不知道如何设计背景图像部分，因为有两个非常大的背景图像。这是设计

并使用以下 CSS 片段，这就是我所实现的

body {
    position: relative;
    min-height: 100vh;
    background: url(images/bg-pattern-top.svg) , url(images/bg-pattern-bottom.svg);
    background-color: hsl(185, 75%, 39%);
    background-position: top left, bottom right;
    background-repeat: no-repeat,no-repeat;
    font-family: 'Kumbh Sans', sans-serif;

}

请谁能指导我如何修改我的代码以获得我想要实现的目标？圆圈图像是两个不同的非常大的 SVG 图像，我不知道如何使它们不重叠

Answer 1

感谢您提出这个问题，我认为这是一个重要的问题，尤其是对于初学者而言。 为了使它们不重叠，您需要添加多个 CSS 属性。 这是代码

body{
  background-image: url(images/bg-pattern-top.svg), url(images/bg-pattern-bottom.svg);
  background-size: contain, cover;
  background-position: top left, bottom right;
  background-repeat: no-repeat, no-repeat;
  z-index: -1;
}