如何在单个grid div中适配四张背景图并消除间隙？

问题出在你用了background-size: contain——这个属性会强制背景图保持原始宽高比完整显示，一旦容器的宽高比和图片不一致，就会出现无法填满的间隙。给你几个可行的解决办法：

办法一：用cover替代contain #

cover会让背景图按比例缩放，完全覆盖对应角落的容器区域，代价是可能裁剪掉图片的部分内容，但能彻底消除间隙。修改后的代码：

.grid-item3{
    background-image: url(./images/bg-section-top-desktop-1.svg),url(./images/bg-section-top-desktop-2.svg),url(./images/bg-section-bottom-desktop-1.svg),url(./images/bg-section-bottom-desktop-2.svg);
    background-position:left top,right top, left bottom, right bottom;
    background-size: cover,cover,cover,cover;
    background-repeat: no-repeat;
}

注：background-repeat可以只写一次，所有背景图会继承这个规则

办法二：设置背景图为固定百分比宽度 #

如果不想裁剪图片，可以根据容器尺寸给背景图设置合适的百分比，比如让顶部左右两张图各占容器宽度的50%，高度自动适配：

.grid-item3{
    background-image: url(./images/bg-section-top-desktop-1.svg),url(./images/bg-section-top-desktop-2.svg),url(./images/bg-section-bottom-desktop-1.svg),url(./images/bg-section-bottom-desktop-2.svg);
    background-position:left top,right top, left bottom, right bottom;
    background-size: 50% auto, 50% auto, 50% auto, 50% auto;
    background-repeat: no-repeat;
}

这个方法需要你的图片本身是适配边角的设计，且高度足够覆盖容器的顶部/底部区域，否则仍可能出现间隙。

办法三：排查容器本身的内外边距 #

有时候间隙不是背景图的问题，而是容器自带了padding或margin，导致背景图没覆盖到容器边缘。可以加上以下代码确保容器边缘无额外间距：

.grid-item3{
    /* 原有背景属性保留 */
    padding: 0;
    margin: 0;
    background-clip: border-box; /* 确保背景延伸到容器边框 */
}

内容的提问来源于stack exchange，提问作者user20617316