背景圖片不會顯示

下面是我的側邊欄的HTML和CSS代碼。背景圖片不會顯示

<div id="sidebar"> 
    <header> 
    <h3 class="site-title">The Code Stitchery</h3> 
</header> 
<nav> 
    <ul> 
     <li><a href="#">Portfolio</a></li> 
     <li><a href="#">Blog</a></li> 
     <li><a href="#">Downloads</a></li> 
     <li><a href="#">About</a></li> 
      <li><a href="#">Contact</a></li> 
    </ul> 
    </nav> 
</div>

CSS

nav a { 
    background: url(/Images/tape_measure_unit.png) no-repeat; 
    display: block; 
    padding: 2px 4px; 
    text-align: center; 
    width: 256px; 
    height: 36px; 
}

的背景圖像顯示在Eclipse的網頁編輯器就好了，但是當我走在Web瀏覽器中打開同一個頁面，只有文字顯示。我從一些其他職位試過的建議，其中包括：

但我仍然難住了。

這是側邊欄看起來像Eclipse的網頁編輯器是什麼： A screenshot of the offending page

這就是它看起來像在Mozilla Firefox： enter image description here

用於獲取圖像的正確顯示任何提示嗎？

來源

2012-03-15 MissPiplup

如果您將「圖片」全部設爲小寫，會發生什麼情況？ – Scott 2012-03-15 01:42:59

最有可能不會工作 – MissPiplup 2012-03-15 08:16:12

當您從瀏覽器訪問您的home.html文件時，您在映像的網址（/Images/tape_measure_unit.png）中使用絕對路徑，該路徑對驅動器號變爲絕對：file:///C:/Images/tape_measure_unit.png。我認爲你的形象不在那裏，是嗎？

製作相對於CSS文件位置（或HTML文件，如果沒有）的路徑。例如：

 background: url(../Images/tape_measure_unit.png) no-repeat; 
        /**NOTE THE PERIOD BEFORE THE SLASH.**/

請注意，將所有這些部署到Web服務器後，絕對路徑可能有意義。例如，如果您的Web服務器具有與本地codestitchery文件夾相對應的根路徑，則圖像路徑將起作用。

來源

2012-03-15 01:36:14 Diego

謝謝。關於文件路徑的提示工作。「圖片」文件夾與網頁位於同一級別，因此添加「..」已起作用。 – MissPiplup 2012-03-15 04:00:17

您的代碼似乎工作對我說：

http://jsfiddle.net/GzzWU/

您確保瀏覽器不緩存舊的版本，如果你的CSS的內容？在測試/調試這類事情時，這是一個常見問題。如果你碰巧在IE中進行測試（即使Chrome和Firefox在重新使用緩存樣式表而不是下載更新版本方面都非常積極），那麼雙打也是如此。

如果不是這樣，那麼這可能是您的圖片網址的問題。您是否嘗試過直接在http://<your server>/Images/tape_measure_unit.png處指向瀏覽器並確保圖像回來？

來源

2012-03-15 01:31:47 aroth

背景圖片不會顯示

回答

相關問題