背景圖像無法正確顯示css

我遇到了圖像無法正確顯示在其他圖標後面的問題。我正在應用兩個單獨的圖像來環繞圖標。第一個顯示正常，但第二個顯示在底部。背景圖像無法正確顯示css

這裏的網站，可以看到在頁腳中的錯誤：http://everythingdisc.hubs.vidyard.com/

<div class="inner"> 
    <div class="icons"> 
     <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">&nbsp;</a> 
     <a href="https://twitter.com/everything_disc " id="twitter">&nbsp;</a> 
     <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">&nbsp;</a> 
    <div class="clear-left">&nbsp;</div> 
    </div> 
</div>

下面是我使用的CSS：

#social-media .inner { 
    display: inline-block; 
    height: 74px; 
    padding: 0 0 0 30px; 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat; 
} 

#social-media .inner .icons { 
    display: inline-block; 
    width: auto; 
    height: 59px; 
    padding: 15px 20px 0 0; 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat; 
}

任何人都知道爲什麼圖像不顯示屬性？

來源

2014-11-13 Alexander Agosta

'＃社交媒體.inner .icons {高度：59px; }該元素的高度應該與其父元素的高度相匹配（'height：74px'或'height：100％'）。 – showdev

你需要給這兩個div相同的高度。

#social-media .inner { 
display: inline-block; 
height: 74px; 
padding: 0 0 0 30px; 
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat; 
} 

#social-media .inner .icons { 
display: inline-block; 
width: auto; 
height: 74px; 
padding: 15px 20px 0 0; 
background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat; 
}

來源

2014-11-13 18:18:36 Chitrang

從我可以看到顯示圖像左側的div是74px高，但顯示右半部分的div只有59px高。另外，左側的div包含右側的div，並有30px的底部填充，這可能會搞亂右側的顯示。嘗試這樣的事情......我沒有你的圖標，使定位可能會關閉，但您的圖像正確顯示現在

.inner { 
 
    display: inline-block; 
 
    height: 74px; 
 
    padding: 0 0 0 30px; 
 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-left.jpg) 0 0 no-repeat; 
 
} 
 

 
.inner .icons { 
 
    display: inline-block; 
 
    width: auto; 
 
    height: 74px; 
 
    padding: 15px 20px 0 0; 
 
    background: url(http://www.everythingdisc.com/../images/footer-icon-bg-right.jpg) top right no-repeat; 
 
}

<div class="inner"> 
 
     <div class="icons"> 
 
      <a href="https://www.linkedin.com/company/inscape-publishing?trk=company_name" id="linkedin">icon1</a> 
 
      <a href="https://twitter.com/everything_disc " id="twitter">icon2</a> 
 
      <a href="http://www.youtube.com/user/InscapeChannelDev" id="youtube">icon3</a> 
 
      <div class="clear-left">&nbsp;</div> 
 
     </div> 
 
    </div>

來源

2014-11-13 18:29:58

背景圖像無法正確顯示css

回答

相關問題