嵌套div背景颜色 [英] Nested divs Background-color

问题描述

我试图更改父div的背景颜色后面的孩子。种类就像在这张图片中的背景如何比其他div更暗。
这里是我的HTML：

I am trying to change background-color of the parent div behind the children ones. Kind of like how the how the background in this image is darker than the other divs. here is my 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

The main div is not the color #AAAAAA

感谢，Ben

推荐答案

您忘了在子类中添加背景颜色

You forgot to add background-color in sub class and also add padding for the clear 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

这篇关于嵌套div背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！