從單個PNG圖像獲取圖標

直到現在我已經看過這麼多次了，但我從來沒有用過我自己。有人能解釋一下你怎麼可以從這個單一的PNG圖像獲得特定圖標的圖片，例如我選擇紅色的圖標...使用CSS從單個PNG圖像獲取圖標

enter image description here

2013-08-12 David Dury

這就是所謂的CSS精靈。要理解這一點，你需要知道每個圖標的寬度和高度。 –

@Mr_Green我有點不一樣的時候有不同的大小圖標.. –

添加到下面的解決方案，也採取創建此圖像的設計師的幫助。 –

這就是所謂的CSS sprites。它用於減少http請求。基本上所有圖標被放置在單個畫布上，並用作background-image屬性和後，他們正在使用CSS background-position屬性映射，因此，例如

.icon1 { 
    background-image: url('YOUR_URL_HERE'); 
    background-position: 10px 10px; /* X and Y */ 
    height: 30px; 
    width: 30px; 
}

所以inshort只是限定修復高度/寬度您的元素，並使用background-position屬性映射畫布。因此，如果您在頁面上有100個小圖標圖像，它將向服務器發出100個請求，因此爲了提高性能，將使用CSS Sprites。

2013-08-12 06:31:51

一個問題：你如何獲得背景位置？我的意思是你嘗試，直到你得到正確的圖片？有沒有這樣的技術或工具？ –

@DavidDury無論是手動還是您將獲得大量[sprite生成器]（https://www.google.com/search?q=css+sprite+generator&ie=utf-8&oe=utf-8&aq=t&rls=org.mozilla： EN-US：官方與客戶端=火狐-A） –

2013-08-12 06:32:19 Quentin

使用背景速記來定位圖像。

div { 
    background:url(http://i.stack.imgur.com/mUhg1.png) -82px -104px; 
    width:27px; 
    height:27px; 
}

2013-08-12 07:01:36

回答