文本和图像精灵

Question

我尝试建立与精灵的图像和文字

这里，横向菜单是什么，我想，但不能用CSS实现图像。

我的CSS是这样的。

 

    #top_menu { 
     color: #FFFFFF; 
     height: 40px; 
     background-color:#222; 
     float: right; 
    } 
    #top_menu ul { 
     font-size: 13px; 
     margin-top: 13px; 
    } 
    #top_menu li { 
     display: inline; 
     list-style-type: none; 
     padding-right: 10px; 
    } 

    .sprite {background:url(images/sprite.png);} 
    .transparent {background:url(/images/transparent.png);} 
     .contact {height:18px;} 


      /*Top menu icons*/ 
      .sales{width:13px;background-position:-1px -72px;} 
      .login{width:13px;background-position:-15px -72px;} 
      .forum{width:13px;background-position:-29px -72px;} 
        .livechat{width:13px;background-position:-44px -72px;} 

HTML部分

<div id="top_menu" class="grid_6"> 
     <ul id="top_nav"> 
     <li class="sprite contact sales"><span>Sales:1-800-555-7777</span></li> 
     <li class="sprite contact login"><span>Administrator</span></li> 
     <li class="sprite contact forum"><span>Forum</span></li> 
     <li class="sprite contact livechat"><span>Live Chat</span></li> 
     </ul> 
    </div> 

正如你所看到的图像是对文本的顶部，也显示一个以上的图标。 :(

任何人都可以请帮我这个？我不想由单独调用每个图标。 非常感谢！

Answer 1

你必须以不同的方式创建你的精灵一点。

而不是把图标下一个彼此的，把它们在彼此的顶部。这样一来，所有你需要做的就是调整Y定位来获得你想要的图标。

您可能也有兴趣使用这些工具之一：

http://csssprites.com/

http://spriteme.org/