如何实现仅调整背景图片宽度、高度固定的屏幕适配？

DevOps 小满

2026-6-20

实现固定高度、宽度铺满屏幕的背景图效果

问题出在SVG的渐变单位和CSS细节设置上：当前SVG用userSpaceOnUse作为渐变单位，背景图拉伸到100vw宽度时，渐变无法自适应导致显示异常；另外需要将高度精确设置为746px。

解决方案步骤：

修改SVG的渐变适配方式
把渐变的gradientUnits从userSpaceOnUse改为objectBoundingBox，并将渐变坐标调整为0-1的相对值，让渐变跟随SVG尺寸自适应拉伸：

<svg
    width="1439"
    height="740"
    viewBox="0 0 1439 740"
    fill="none"
    xmlns="http://www.w3.org/2000/svg"
>
    <path
        d="M98.4726 637.816C58.958 651.755 25.837 669.251 0 688.25V0H1439V636.812C1355.3 584.281 1275.96 582.088 1207.85 596.928C1104.81 619.379 1007.79 667.609 908.468 703.067C882.986 712.164 855.933 721.065 828.042 728.383C586.346 791.797 334.116 554.688 98.4726 637.816Z"
        fill="url(#paint0_linear_111_752)"
    />
    <defs>
        <linearGradient
            id="paint0_linear_111_752"
            x1="0"
            y1="0.5"
            x2="1"
            y2="0.5"
            gradientUnits="objectBoundingBox"
        >
            <stop stop-color="#390696" />
            <stop offset="1" stop-color="#8C129A" />
        </linearGradient>
    </defs>
</svg>

调整CSS确保尺寸和无留白
移除body默认边距，将背景图高度设为746px，宽度铺满屏幕：

body {
    margin: 0; /* 消除默认边距，避免背景图周围留白 */
    color: var(--color-black);
    background-image: url("./images/backgrounds/main.svg");
    background-repeat: no-repeat;
    background-size: 100vw 746px; /* 宽度匹配设备宽度，高度固定为746px */
    background-position: top left;
    min-height: 100vh; /* 可选：确保body至少占满视口高度 */
}