background-position的运用
在原图上进行定位显示
background-position:-100 0;
sprite工具自动生成:CssGage
HTML
<div class="cat">
<ul>
<li class="cat-1">
<i></i>
<h3>服装</h3>
</li>
<li class="cat-2">
<i></i>
<h3>鞋包</h3>
</li>
<li class="cat-3">
<i></i>
<h3>运动</h3>
</li>
<li class="cat-4">
<i></i>
<h3>首饰</h3>
</li>
</ul>
</div>
CSS
h3,ul{ /*格式化原来元素的属性*/
margin: 0;
padding: 0;
}
ul{
list-style: none; /*去除无序列表圆点*/
}
li h3{
font-size: 14px;
font-weight: 400;
}
li{
display: block;/*设置成块元素,使height起作用*/
height: 31px;
line-height: 31px;
overflow: hidden;/*溢出内容隐藏*/
border-bottom:1px solid gainsboro ;
}
li i{
background: url("sidebar.png");/*添加生成的大图*/
display: inline;/*设置成行内元素*/
width: 30px;
height: 24px;
float: left;
margin: 3px 10px 0 0;
}
.cat{
width: 100px;
background:#e8e8e8;
border: 1px solid gainsboro;
}
.cat-1 i{ background-position:0 0;}/*小图标位置定位*/
.cat-2 i{ background-position:0 -24px;}
.cat-3 i{ background-position:0 -48px;}
.cat-4 i{ background-position:0 -72px;}
效果图