如何在两张背景图片之间填充与背景图同色的背景色？

要在两张背景图之间填充和图片一致的颜色，按下面两步操作就行：

• 第一步：用取色工具（比如浏览器开发者工具的取色器、Photoshop）提取你那两张SVG背景图里的主背景色，从你提供的示例图来看，这个颜色大概是#f6fbff，你可以根据自己SVG的实际颜色调整数值。
• 第二步：把这个纯色加到background属性的最后——因为CSS背景层是从后往前叠加的，纯色会作为底层，两张SVG图在它上方显示，中间的空白区域就会被纯色填满。

修改后的CSS代码如下：

#first-illustration {
  padding-top: 15%;
  padding-bottom: 10%;
  background:url("../images/bg-section-top-desktop-1.svg") top, url("../images/bg-section-bottom-desktop-1.svg") bottom, #f6fbff;
  background-repeat: no-repeat;
  background-size: contain;
}

原理很直白：你原来的CSS只设置了两张背景图，中间区域没有对应的背景层，所以会显示父元素的背景色。现在加上和SVG一致的纯色底层，刚好能填补中间空白，视觉上和背景图完全融为一体。

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