如何将文本添加到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

回答

相关问题