如何用CSS实现双大尺寸SVG背景图无重叠效果？

我正在学习HTML和CSS，拿到一份设计稿后，不知道如何实现背景图部分——因为有两张尺寸为978px×978px的超大SVG背景图。

期望实现的效果：

当前实现效果：

SVG样式参考：

我使用以下CSS代码后，两张SVG背景图出现重叠，请求指导修改代码以达成目标效果：

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向屏幕外侧移动，避免中心区域重叠。以下是两种可行的修改方式：

方式一：基于视窗单位的响应式偏移（推荐）

这种方式适配不同屏幕尺寸，保持背景图的相对位置一致：

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: right 50vw bottom 50vh, left 50vw top 50vh;
    background-repeat: no-repeat, no-repeat;
    /* 可选：根据设计需求调整背景图缩放比例，适配小屏 */
    background-size: 60%;
    font-family: 'Kumbh Sans', sans-serif;
}

说明：

• right 50vw bottom 50vh：让顶部SVG的右下角对齐屏幕中心偏左上的位置，避免侵入中间内容区
• left 50vw top 50vh：让底部SVG的左上角对齐屏幕中心偏右下的位置
• background-size: 60%：将背景图缩放到视窗宽度的60%，你可以根据设计稿的视觉效果调整这个数值（比如70%、80%）

方式二：固定像素偏移（适合固定尺寸设计）

如果你的设计是针对特定屏幕尺寸，也可以用固定像素值调整位置：

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%);
    /* 顶部图向左上偏移300px，底部图向右下偏移300px */
    background-position: -300px -300px, calc(100% + 300px) calc(100% + 300px);
    background-repeat: no-repeat, no-repeat;
    font-family: 'Kumbh Sans', sans-serif;
}

说明：

• -300px -300px：让顶部SVG向左、向上各偏移300px，超出屏幕左上边缘
• calc(100% + 300px) calc(100% + 300px)：让底部SVG向右、向下各偏移300px，超出屏幕右下边缘
• 你可以根据实际视觉效果调整300px这个数值，直到两张图不再重叠且符合设计要求

内容的提问来源于stack exchange，提问作者Adebimpe Abdulhamid Eniola