Css 父母背景高于子女'；s

我在想也许有什么方法可以用CSS来实现这一点

我有父div和子div。孩子总是有一个背景色，我想在数据加载的情况下切换额外的类。因此，在加载数据时，父div将具有背景图像和颜色（可能是带有透明度的rgba）。 我想对家长这样做的原因是，我不知道孩子的确切数量，或由此产生的身高，所以加载叠加div似乎不是一个好主意

这是小提琴，可以看出孩子的背景比父母好

.parent{
background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
z-index:10000;
position:relative;

}

---

您可以使用一个伪元素来实现这一点，加载完成后必须删除该伪元素（但这是另一个问题）。在这里，我使用了一个悬停来显示和关闭它

HTML

一些内容 CSS

.parent {
    position: relative;
}
.parent:after {
    position: absolute;
    content:"";
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
}

/* temp hover state for demo purposes*/

.parent:hover:after {
    display:none;
}

.child {
    width:300px;
    height:300px;
    background-color: rgba(0, 250, 250, .7);
}

---

不清楚你在问什么。谢谢，我想避免绝对定位，但是，正如我所看到的，这是不可能的。当需要特定效果时，使用绝对定位没有错。不过，在总体布局中使用它……是的，避免像瘟疫一样。

.parent {
    position: relative;
}
.parent:after {
    position: absolute;
    content:"";
    top:0;
    left:0;
    bottom:0;
    right:0;
    background: url('http://www.securenet.com/sites/default/files/spinner.gif') no-repeat scroll 0% 0% / contain #FFF;
}

/* temp hover state for demo purposes*/

.parent:hover:after {
    display:none;
}

.child {
    width:300px;
    height:300px;
    background-color: rgba(0, 250, 250, .7);
}