css精灵图

一、什么是css的精灵图?
是一种图像的合成技术，说白了，就是在一张集成了好多张图片的大图片上根据background-position显示要显示的图片

二、引入精灵图的原因：

具体是因为，网页上面的每张图片都要经历一次请求才能展示给用户，小的图标频繁的请求服务器，降低页面的加载速度，为了有效地减少服务器接收和发送请求的次数，提高页面的加载速度，因此，产生了css精灵技术。

三、使用方法：

以此图片为例：

HTML代码：

 <ul>
                <li class=" big shopcar"></li>
                <li>购物车</li>
                <li class=" big helpcenter"></li>
                <li>帮助中心 </li>
                <li class="big joincollect"></li>
                <li>加入收藏</li>
                <li class="big home"></li>
                <li>设为首页</li>
                <li class="login">登录 </li>
                <li class="register">注册 </li>
            </ul>

以你用的图片的左上为原点测量你想截取的图片的左上角的坐标（单位是毫秒）测量工具：picpick

CSS代码：

        ul li {
            list-style: none;
            display: inline-block;
        }

        .big {
            width: 25px;
            height: 24px;
            background-image: url('images/icon.gif');
        }

        .shopcar {
            background-position: 0px 0px;
        }

        .helpcenter {
            background-position: -46px 0px;
        }

        .joincollect {
            background-position: -90px 0px;
        }

        .home {
            background-position: -127px 0px;
        }

猜你喜欢