父级背景覆盖子元素

Question

父级背景覆盖子元素

3

我在想也许有一种方法可以用CSS来实现这个功能。

我有一个父元素和一个子元素。子元素将始终具有背景颜色，并且我想在数据加载时切换附加类。因此，当数据正在加载时，父元素将具有背景图像和颜色（可能是带透明度的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);
}

- spl1n

1

你的问题不太清楚。 - undefined

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Paulie_D · Accepted Answer

你可以使用伪元素来实现这一点，需要在加载完成后移除它（但这是另一个问题）。这里我使用hover来显示和隐藏它。 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);
}