父母对孩子的背景

spl1n 发表于 Dev

spl1n

我想知道也许有什么办法可以用CSS做到这一点。

我有父母div，有一个孩子。孩子总是会有背景色，我想在数据加载的情况下切换其他类。因此，当加载数据时，父div将具有背景图像和颜色（可能是带有透明性的rgba）。我想对父级执行此操作的原因是我不知道子级的确切数目或所产生的高度，所以加载overlay div似乎不是一个好主意...

http://jsfiddle.net/3Xpnx/15/这是小提琴，可以看出孩子的背景是父母之上的

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

}

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

保利

您可以使用伪元素来执行此操作，一旦完成加载，就必须将其删除（但这是另一个问题）。在这里，我使用鼠标悬停来显示和关闭它。

JSfiddle演示

的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);
}