兒童div來放置在父div的頂部圖像

我試圖把孩子的div在其父div的頂部（包括其內容）兒童div來放置在父div的頂部圖像

<div id="footer"> 
    <div id="footer-container"> 
    <div id="icon"></div>      
    </div>  
</div> 

#footer { 
    height:50px; 
    border-top:3px #666 solid; 
    margin-top:50px; 
} 

#footer-container { 
    height: 30px; 
    width: 300px; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -15px; 
} 

#icon { 
    height:30px; 
    width:30px; 
    background-color:#666; 

}

現在，它的工作原理，如果內容<div id="icon">是文本，但如果您將背景圖像放在div中，它不會。有什麼辦法可以做到這一點？這可能是更好的解釋 http://jsfiddle.net/4QxL7/

編輯道歉。它一直在努力。我在使用PNG的圖像，在中間有'空白'的圖像，使父div中的邊框（它是相同的顏色）看起來像是在孩子的頂部，它實際上是後面。

感謝您的幫助

來源

2012-09-27 davidb

你如何將背景圖像放在div中？ –

而不是背景顏色在#icon它是背景圖像 – davidb

我想我不明白，小提琴上的例子按照你想要的方式工作，對吧？ – Derik

我只是嘗試了兩種方法，他們都使用工作從我的站點中的超大圖像...

<div id="footer"> 
     <div id="footer-container"> 
      <div id="icon"><img src="image url here" width=30 height=30/></div>      
     </div>  
    </div>

http://jsfiddle.net/ZkxSM/

和

#icon { 
    height:30px; 
    width:30px; 
    background-color:#666; /*unnecessary now probably...*/ 
    background:url('image url here'); 
}

http://jsfiddle.net/b6QyX/（需要手動調整圖像大小s到也許工作...或寬度和高度可以在div的HTML設置）

沒有什麼實際問題與您的jsfiddle ..

來源

2012-09-27 21:36:48

道歉。它一直在努力。我使用PNG的圖像，在中間有'空白'的圖像，使父div中的邊框（這是相同的顏色）看起來像是在孩子的頂部，它實際上是後面。

感謝您的幫助

來源

2012-09-27 21:45:21 davidb

兒童div來放置在父div的頂部圖像

回答

相關問題