如何將文本添加到CSS Sprite

我在此處創建了一個博客模板：http://aergaergerg.blogspot.com.au/，正如您所看到的「精選帖子」的按鈕爲空。我想知道如何通過html小工具本身或css或任何可能的方式向他們添加文本。有些人可能會建議在圖片中加入文字，除了我的問題是因爲它是'精選文章'，顯然這些鏈接會發生很大的變化。下面是想什麼，我實現了圖片：如何將文本添加到CSS Sprite

總之，這裏的HTML的功能後按鈕（CSS精靈）：

<!--Social Sprite Html2--> 
<div id="head-soc2"> 
<ul> 
<li id="Button1"><a href="http://www.spaceheroesfansite.com/p/about.html">3</a> </li> 

<li id="Button2"><a href="http://www.spaceheroesfansite.com/p/promo-codes.html"></a> </li> 

<li id="Button3"><a href="http://www.spaceheroesfansite.com/p/game-tricks.html"></a></li> 

<li id="Button4"><a href="http://www.spaceheroesfansite.com/p/purple-jacket-squad.html"></a></li> 

<li id="Button5"><a href="http://www.spaceheroesfansite.com/p/purple-jacket-squad.html"></a></li> 

</ul> 

<!--Social Sprite Html2--></div>

併爲它的CSS：

/*Social Sprite Css Buttons*/ 
#head-soc2 ul li {list-style :none; padding: 0px; float: center;} 
#head-soc2 ul li a {text-indent: -9999px; font-size: 0; line-height: 0; overflow: visible ; border: 0; background: url("http://3.bp.blogspot.com/-D2V1j-OWhrM/UqYsp5RVMuI/AAAAAAAADgI/IsObrayuepI/s1600/bannersprite2.png") no-repeat; display:  block;} 


#head-soc2 li#Button1 a{background-position: -787px 0px;height: 51px; width: 204px;  margin-bottom:15px;} 
#head-soc2 li#Button1 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 

#head-soc2 li#Button2 a {background-position: -787px 0px;height: 51px; width: 204px;  margin-bottom:15px;} 
#head-soc2 li#Button2 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 

#head-soc2 li#Button3 a {background-position: -787px 0px;height: 51px; width: 204px; margin-bottom:15px;} 
#head-soc2 li#Button3 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 

#head-soc2 li#Button4 a {background-position: -787px 0px;height: 51px; width: 204px; margin-bottom:15px;} 
#head-soc2 li#Button4 a:hover {background-position: -787px -51px;height: 51px; width: 204px} 
#head-soc2 li#Button5 a {background-position: -787px -102px;height: 51px; width: 204px; margin-bottom:15px;} 
#head-soc2 li#Button5 a:hover {background-position: -787px -102px;height: 51px; width: 204px}

，如果它幫助這裏是一個的jsfiddle :) http://jsfiddle.net/8xZDL/

謝謝！

來源

2013-12-09 Joeono

@codehorse這個問題確實有無關精靈，除了這對實現背景圖像OP的策略。這更好地描述爲「爲什麼我的文本沒有出現在這些按鈕中」;答案是，字體大小設置爲0，文本縮進9999px離開屏幕。 –

嗯，我認爲下面的CSS是你的問題。我覺得如果你堅持了一下，你會發現這一點。只要把這些3條規則出來，它的工作原理

#head-soc2 ul li a { 
    text-indent: -9999px; 
    font-size: 0; 
    line-height: 0;

來源

2013-12-09 22:12:11

謝謝！我不敢相信我沒有想到！我只是一個初學者編碼 – Joeono

無後顧之憂！我知道它有時需要我整整一天才能找到大寫錯誤哈哈......祝你的項目好運！ –

另外，你將如何去改變字體？謝謝！ – Joeono

如何將文本添加到CSS Sprite

回答

相關問題