当用作背景图像时，我不能将背景颜色应用于SVG吗？

Question

我有一个SVG用作一个元素的背景图像：

HTML：

<div id="humility" class="mix category-1" data-myorder="1"></div>

CSS：

#humility {
background-size: cover;
background-repeat: no-repeat !important;
background: url(data:image/svg+xml;/*did not include for brevity*/);
overflow: visible;
max-height: 110px;
z-index: 10000;

}

然后我有一个课程，我想用它来覆盖上面的内容：

.container.list .mix {
    width: 100% !important;
    height:150px !important;
    background-size: 125px 125px !important;
    background-position: 20px -8px!important;
    background-color: blue !important;
}

然而，当我来回切换时，SVG消失了！？

任何建议都将不胜感激！

更新 这是一个fiddle！

UPDATE-2： 显然有一个应用的类只适用于列表视图：

.list {
    background-color: blue !important;
}

但是当我尝试用background-color: blue !important;填充它时，它会溢出容器......