從一個PNG文件中的許多圖像選擇圖像

我的問題是，當開發任何網站，我使用許多圖像停止，下一步，返回，prev做一些東西，我把它們放在不同的文件夾，並單獨訪問它們。但是，當我看到其他網站，並嘗試獲取圖像，如回覆，發佈，搜索，以便我可以將它們用於我的網站或使用顏色組合的方式，他們有使用。我看到的是，我在一個PNG圖像中獲得了許多圖像。我想問的是，將所有圖像放在一個PNG圖像中，並從那裏訪問一張圖像時，他們如何從這些圖像訪問特定圖像。如果任何人可以提供一些代碼，那麼這將是非常好的，也是優點和缺點。在此先感謝。從一個PNG文件中的許多圖像選擇圖像

來源

2014-10-29 kedar

我想你指的是什麼精靈。 Sprite是一個.png圖像中的小圖標的集合。這樣做的好處是提高了網站加載的速度，這些小圖標被分組在一起，這導致一個小的PNG圖像與這些imgs單獨存儲的每個圖像進行比較。

然後通過背景位置訪問精靈中的圖像。

最好的例如 http://www.spritecow.com

來源

2014-10-29 11:01:12

嗨，感謝您的快速回復......並且我瞭解它是什麼，但是......我如何在我的網站中使用Sprite的東西...... plz幫我解決這個問題....必須使用代碼或者是否有像這樣的現成的東西.... – kedar 2014-10-29 11:43:14

你必須在Photoshop中創建精靈。它可以是任何寬度和高度，並且背景必須是透明的，根本沒有背景。之後，拖動此PSD上的圖標/圖像並以適當的方式放置它們，在這些圖像之間留出適當的空間。完成後，將其保存爲png。 http://css-tricks.com/css-sprites/ 向下滾動到最後，你可以看到精靈的例子。加載spritecow.com中的精靈，你將能夠獲得他們每個人的BG位置，複製並粘貼到你的CSS代碼。 – 2014-10-29 11:57:51

閱讀關於CSS sprites。例如：

http://alistapart.com/article/sprites

http://css-tricks.com/css-sprites/

http://spritegen.website-performance.org/

來源

2014-10-29 10:59:04 leonbloy

從一個PNG文件中的許多圖像選擇圖像

回答

相關問題