嵌套的div背景顏色

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

謝謝，本

Answer 1

您忘記了在子類中添加背景顏色，併爲清晰視圖添加了填充。

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

Answer 2

只是分配一個不同的背景顏色，以你的不同的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; 
}