css图片精灵技术

1、CSS Sprites（图片精灵）技术可以减轻服务器的负载，提高网页加载速度。将网页需要的多个小图片整合到一张大图片上，原先需要访问多次服务器来获取对应的图片，现在可能只需要获取一张图片即可。
2、实现方式：给元素设置背景图片，重复方式为不重复，然后通过设置background-position属性来设置背景图片的位置。

3、使用图片精灵技术实现下面图片中音乐图标的显示

代码实现：

div {
    width: 140px;
    height: 140px;
    /* 背景图片 */
    background-image: url(./images/图标.jpg);
    /* 背景图片重复方式：不重复 */
    background-repeat: no-repeat;
    border: 1px solid red;
    /* 图片精灵技术  css  sprites技术 */
    background-position: -118px -129px;
    background-position: -463px -482px;
}

<div></div>

结果截图