家长背景儿童的

Question

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

我有父母的div和孩子之一。孩子总是会有背景颜色，我想在数据加载的情况下切换额外的类。所以当数据加载时，父div将具有背景图像和颜色（可能是rgba具有透明度）。 我想这样做与父母的原因是我不知道儿童的确切数量，或由此产生的高度，所以加载覆盖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); 
} 

Answer 1

你可以用这将对一旦加载结束被删除伪元素做到这一点（但这是另一个问题） 。在这里，我使用悬停来显示它的开启和关闭。

JSfiddle Demo

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