的名单背景CSS精灵

问题描述：

我有一个侧边栏垂直菜单这就需要添加一个图标对每个项目的前离开，我已经尝试下面的方法，但不能显示的图标：的名单背景CSS精灵

工具栏菜单：

<div class="sidemenu-wrapper"> 
    <h3 class="section-title">store</h3> 
    <div class="sidebar-filter">  
     <div class="store"> 
      <ul> 
       <li class="ico_01"><a href="../profile">shop profile</a></li> 
       <li class="ico_02"><a href="../products">my products</a></li> 
       <li class="ico_03"><a href="../sales">my sales</a></li> 
       <li class="ico_04"><a href="../income">my income</a></li> 
      </ul> 
     </div> 
    </div><!-- /.sidebar-filter --> 
</div>

CSS：

.sidemenu-wrapper .store ul > li { 
    background: url('../images/sidemenu-ico.png') no-repeat; 
    height: 46px; 
} 
.sidemenu-wrapper .store ul > li.ico_01 { 
    background-position: 0 0; 
} 
.sidemenu-wrapper .store ul > li.ico_02 { 
    background-position: 0 46px !important; 
} 
.sidemenu-wrapper .store ul > li.ico_03 { 
    background-position: 0 92px !important; 
}

sidemenu-ico.png：

enter image description here

我已经参考use CSS sprites for list (<li>) background image，按照给定的例子来尝试，仍然没有运气。

答

由于这些都只是环绕整个事情可以在没有任何图像来完成：

li:before { 
    content: ''; 
    border: 6px solid #4cd900; 
    border-radius: 100% 100%; 
    margin-right: 10px; 
    font-size: 0px; 
} 
.li.ico_01 { border-color: green; } 
.li.ico_02 { border-color: red; } 
.li.ico_03 { border-color: blue; }

图像为样本，应该有它 – kefoseki

图标好。图像未被显示的唯一原因是图像文件的路径不正确。另外，您可能需要为样式添加宽度。 – jeff

答

.sidemenu-wrapper .store ul > li.ico_01 { 
    background: url(PM8uh.png) no-repeat scroll 0px 0px transparent; 
    line-height: 26px; 
    padding: 0px 0 0 26px; 
    margin: 0px 0 0 -36px; 
    } 
.sidemenu-wrapper .store ul > li.ico_02 { 
    background: url(PM8uh.png) no-repeat scroll 0px -51px colorvalues; 
    line-height: 26px; 
    padding: 0px 0 0 26px; 
    margin: 0px 0 0 -36px; 
    }

喜欢聪明人，你可以修改所有列表

你有试过吗？ –

的名单背景CSS精灵

相关推荐