圖片精靈沒有顯示

不知道我在這裏做錯了什麼，但我已經嘗試過在相關w3schools頁面上的示例，但無濟於事。所以這是我到目前爲止：圖片精靈沒有顯示

我在我的索引頁上有四個圖像，名爲index1.png，index2.png等。我將它們合併爲一個png，它只是index.png。這是我的精靈形象。我也有一個1x1透明圖片，它是HTML中每個圖片的佔位符。以下是圖像代碼：

<img class="index1" src="Images/trans.png" alt="alt" title="title" width="40%" />

而CSS：

img.index1 { 
    width:258px; 
    height:300px; 
    background:url(Images/index.png) 0px 0px; 
}

測試頁面的時候，我什麼也沒得到比調整透明圖像更多。我想顯示的圖像不顯示。

編輯：解決。我是一個白癡，忘了上CSS中的一個目錄，因爲我的CSS位於根目錄的文件夾中。正確的路徑是「../Images」

2013-07-03 Hiigaran

背景圖像的路徑是否正確？試圖加載背景圖片時，瀏覽器是否收到200響應？ –

你的第一個問題是試圖使用w3schools作爲資源。你能給一個鏈接到網站？圖像路徑可能是錯誤的 –

希望我可以降低敲w3schools網站的評論。那裏有很多有用的東西，組織良好，免費。 – Gus

您確定圖片文件夾的路徑是正確的嗎？確保你的精靈的路徑是相對於你的CSS文件，而不是從CSS文件鏈接的地方。

如果你有一個文件夾結構是這樣的：

/index.html 
/css/style.css 
/images/sprite.png 
/folder1/index.html 
/folder2/subfolder2/index.html

正確的路徑在你的CSS文件中使用會是這樣的：../images/sprite.png。

無論您在上面的示例中包含哪個index.html文件，該路徑在您的CSS文件中都是相同的。

2013-07-03 22:31:13 hungerstar

男人，哦，男人，我是一個白癡。是的，我忽略了我需要上一個目錄的事實。非常感謝！ – Hiigaran

你不是一個白癡隊友。這只是學習曲線。 +1的答案 – Jawad

嘗試使用除<img>以外的元素。 A <div>元素應該可以正常工作。

<div class="index1" alt="alt" title="title" ></div>

而CSS：

.index1 { 
    width:258px; 
    height:300px; 
    background:url(Images/index.png) 0px 0px; 
}

2013-07-03 22:19:24 fauverism

OP的語法沒有問題。這不會真的改變任何 –

首先，看到好像你正在使用一個精靈<img>不正確的標籤。一個div就足夠了。您也不需要像設置課程一樣在您的CSS中定位HTML。嘗試...

<div class="index1"></div>

此外您的圖片網址缺少引號。

.index1 { 
    background-image:url('Images/index.png'); 
    background-position: 0 0; 
    height:300px; 
    width:258px; 
}

2013-07-03 22:24:55 html5understudy

愛你的名字+1 – Jawad

回答