一個圖片的HTML CSS

這裏多背景是圖片 https://www-udemy-com.global.ssl.fastly.net/static/images/v3/sprites.png?v=17 現在，如果你看看畫面有鑑於事情需要注意 udemy有這樣的背景下針對跨距標籤現在畫面有可能是60 - 100份的圖像他們如何設法給一個部分在這裏一個標籤和圖像的第二部分第二我認爲你我不明白我的意思是看你有2層和一張圖片，當他們爲背景做一個標籤時，圖片將在後臺我不知道他們如何管理顯示一個圖層，他們和第二他們想要在哪裏現在這裏是一個跨度標記的背景 very much parts combined 然後這裏的span標記位於並且背景被很多標籤所採用 enter image description here 一個圖片的HTML CSS

來源

2014-06-10 Waqas

他們只是使用不同的背景位置來指定他們正在使用的精靈表/圖片上的哪個圖像。例如檢查上面突出顯示的ufo圖像的元素。並更改css background position to -390px然後上面和下面的圖像將變得相同，正面指定將相同。

這樣做是爲了減少服務器上的負載，因爲現在只有一個圖像加載 - 主畫面，而不是10分不同的。

看到這個jsFiddle在這裏我已經使用this image，只是使用不同的背景位置爲每個img的CSS代碼。請詢問是否需要進一步澄清。

來源

2014-06-10 07:15:28

你可以給一個例子，請讓我可以把它理解上的第二 – Waqas

當然保持我會做到這一點@Waqas –

，告訴我另一個標籤是如何知道這就是我我的回答更新是爲背景 – Waqas

，可以設置此背景任何你想要的跨度。剩下的事情就是削減正確的部分。

比方說，你有像一個類，它是：

.sp { 
    background-image: url(your/picture.png); 
}

您將此類需要畫面中的所有跨度。然後你切出從中單一圖片：

.sp.button1 { 
    background-position: 20px 50px; 
    height: 28px; 
    width: 50px 
}

（隨機nubmers）

裏，可以指定你第一張圖與class="sp button1"然後。

來源

2014-06-10 07:19:42

所以在課堂上，我們不必使用點... – Waqas

該點用於CSS來定義一個類。當你用HTML添加這個類時，你會跳過它 - 是的。 –

一個圖片的HTML CSS

回答

相關問題