精灵图的细节用法

css精灵图

精灵图的使用

      * {
            margin: 0;
            padding: 0;
        }

        .box {
            position: relative;
            width: 300px;
            height: 80px;
            background-color: #333;
            margin: 50px auto;
        }

        .box span {
            position: absolute;
            width: 20px;
            height: 20px;
            top: 25px;
            left: 100px;
            background-color: #ff3040;
            //随便插入一张精灵图
            background: url(images/jd-sprites.png) no-repeat;
            //background-position调整精灵图的位置：x轴，y轴
            background-position: -167px 0;
         
        }

<div class="box">
     <span></span>
</div>

重要的属性：

background-position: x轴 Y轴