儿童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的顶部图像

回答

相关问题