html css 精灵图的使用

精灵图的使用

什么是精灵图？
css精灵图是一种网页背景图片的处理方式 它将多个零星的背景图像都集中到一张大图中去，然后用这张大图应用于网页，这样 当用户访问网页时 就只需向服务器请求一次，然后通过改变背景图片的位置来显示你所需要的那个小图片
示例：

html代码：
<div class="name1"></div>
        <div class="name2"></div>
        <div class="name3"></div>
        <div class="name4"></div>
<!--        <input type="button" style="width: 100px ; float: left ; background-color: white ; border: 0" >-->
        <div class="name5"></div>
        <div class="name6"></div>

div{
            width: 110px;
            height: 110px;
            float: left;
            background: url("abcd.jpg") no-repeat;
        }
        div.name1{
            background-position: -360px -425px;
        }
        div.name2{
            background-position: -0px -0px;
        }
        div.name3{
            background-position: -260px -280px;
        }
        div.name4{
            background-position: -100px -145px;
        }
        div.name5{
            background-position: 0 0;
        }
        div.name6{
            background-position: -380px -280px;
        }

当然使用时 要为承载图片的容器设置高度
在css里 用background-position属性 调整位置 达到自己想要的效果
效果如图：