CSS Sprite問題

我被要求添加一個新的鏈接到現有的CSS雪碧。CSS Sprite問題

我附加了圖像佈局的基本表示。

Here's the sprite image
它看起來與渲染輸出的標記看起來是這樣的：

<div> 
    <ul id="pcnatabs"> 
    <li id="liTab1"></li> 
    <li id="liTab2"> 
     <a href="#" id="tab2" class="active">one</a> 
    </li> 
    <li id="liTab3"> 
     <a href="#" id="tab3">two</a> 
    </li> 
    <li id="liTab4"> 
     <a href="#" id="tab4">three</a> 
    </li> 
    <li id="liTab5"> 
     <a href="#" id="tab5">four</a> 
    </li> 
    </ul> 
</div>

有正在使用一些現有的CSS，但是，當我修改的圖像加上五分鏈接，我沒有太多的運氣讓它正常工作。由於我之前沒有做過css精靈，我認爲最好從頭到尾以逐步的方式做這件事，並且從方塊1開始。任何人都可以建議我應該從哪裏開始？

來源

2011-06-23 jazzBox

什麼是當前CSS？「CSS雪碧」圖片是什麼樣子的，它是你問題中的圖片嗎？ – thirtydot

請[不要將簽名或標語添加到您的帖子]（http://www.stackoverflow.com/faq#signatures）。 – meagar

http://spriteme.org –

如果這是一個圖像精靈，他們應該共享相同的背景圖像嗎？

然後你只需要分配與其他人相同的背景圖像，其他人的寬度和高度相同，顯示：塊，並且只是改變圖像的背景位置。

由於您獲得的圖片越寬，鏈接越多，您可能必須爲新鏈接沿x軸提供負面背景位置。

來源

2011-06-23 14:31:46

是的，這是我的問題中的圖像。就CSS而言，它不會讓我粘貼在這裏......沒有足夠的空間 – jazzBox

嗯，我想他們可以共享相同的背景。我仍然不確定這件事情是如何工作的。我想粘貼的CSS，但它似乎有一個字符的限制。 – jazzBox

回答

相關問題