Question

我正在尝试更改孩子们背后的父div的背景颜色。有点像this image中的背景如何比其他div更暗。这是我的HTML：

<div class="main"> 
    <div class="sub">
    </div>
</div>

CSS：

div.main {
    background-color:#AAAAAA;
}

div.sub {
    border-style:solid;
    border-width:1px;
    border-color:#AAAAAA;
    border-radius:2px;
    margin:10px;
    box-shadow: 0px 0px 5px #AAAAAA;
}

主要的div不是#AAAAAA的颜色

谢谢，Ben

Answer 1

只需为不同的div分配不同的背景颜色，也可以添加一些填充以使其显示？

div.main {
    background-color:#888888; //<---------- darker
    padding: 10px;            //<-------- padding
}

div.sub {
    border-style:solid;
    background-color:#AAAAAA; //<---------- lighter
    border-width:1px;
    border-color:#AAAAAA;
    border-radius:2px;
    margin:10px;
    box-shadow: 0px 0px 5px #AAAAAA;
}

Answer 2

您忘记在子类中添加背景颜色，并为清晰视图添加填充。

div.main {
background-color:#AAAAAA;
padding:20px;
}

div.sub {
    border-style:solid;
    border-width:1px;
    border-color:#AAAAAA;
    border-radius:2px;
    margin:10px;
    box-shadow: 0px 0px 5px #AAAAAA;
    padding:10px;
    background-color:#fff;
}

我尝试过做同样的事情，它可能会有所帮助：JSFiddle

嵌套divs背景色

2 个答案: