同时设置background-image和background-color,给父组件设置了背景图片，在子组件设置了背景色，如让背景色就基于背景图片的下面

在CSS中，如果你为一个元素同时设置了`background-image`和`background-color`属性，那么背景色将会显示在背景图片的下面。这是因为CSS背景属性是按照层叠的方式进行处理的，即先设置的背景属性会在底层，而后来设置的会覆盖在上面。

例如，如果你有如下的HTML结构：

<div class="parent">
  <div class="child"></div>
</div>

并且你有如下的CSS代码：

.parent {
  background-image: url('path/to/image.jpg');
  background-color: #ff0000; /* 红色 */
}

.child {
  background-color: #00ff00; /* 绿色 */
}

在上面的例子中，`.parent`元素将有一个红色的背景色，它位于图片之下。而`.child`元素则会有绿色的背景色，并且这个绿色的背景色会覆盖在其父元素的背景图片之上。如果你想要`.child`元素的背景色显示在图片之下，你需要确保它的层级没有高于`.parent`元素的层级，可以通过将`.child`的`z-index`属性设置为一个较低的值，或者不设置`z-index`来保持默认层叠顺序。

需要注意的是，CSS中的层叠上下文可能会影响背景色和背景图片的显示顺序，特别是在涉及到透明度、定位等因素时。因此，在复杂布局中，可能需要根据具体情况调整相应的CSS属性，以确保设计意图得以正确实现。