我如何設置與CSS的PNG圖標集？

Question

我曾在許多例子中看到過，jQuery插件和CSS風格的html元素 ，他們設置圖像的圖標與幾個圖標。

我想用我的應用程序來做這個練習。

例如該圖像中，如何選擇一個在CSS？或者選擇其中之一的正確方法是什麼？

任何示例？

謝謝！

Answer 1

這裏用CSS的訣竅是，你顯示的是整個圖像，但是它被翻譯過，並且被它的父母剪下來，或者將它設置爲背景或者作爲絕對定位的圖像並且overflow: hidden。

例如，假設下面的HTML：

<div class="sprite-images checkbox"></div> 

而且讓我們假設我們要顯示的複選框是在spritesheet (32, 32)，並且尺寸是32x32px。

然後，你的CSS會是這個樣子：

.sprite-images{ 
    width: 32px; 
    height: 32px; 
    display: block; // this doesn't matter too much, but can't be inline 
} 

.sprite-images.checkbox{ 
    background-image: url("images/my_spritesheet.png"); // <-- insert spritesheet url 
    background-position: 32px 32px; // <-- these are the spritesheet coords for the actual icon 
} 

而且它的那樣簡單。 background-image將自動被div自身剪裁，我們已經將它設置爲32x32的精靈大小，所以這只是在後臺翻譯它的問題，所以只有你想要的精靈可見。