CSS Sprite雪碧图

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;}

效果图