CSS3-设置背景图片固定大小 其余部分用固定颜色填充

CSS 设置背景图片固定大小 无论屏幕如何增大 背景图片保持中间 多余两边用颜色填充,适应各种大屏幕及拉伸

css如下:

.test-img{
    background-image: url("./XXX.png");
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: rgb(116,177,255);
}

中间粉色部分为背景图片,蓝色部分为设置的background-color,此时将background-color设置为背景图片的背景色则达到我们的需求,效果如下: