css - 嵌套 div 背景色

Question

我正在尝试更改子 div 后面的父 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

谢谢，本

Answer 1

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

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