<!DOCTYPE html><html><head><meta charset="utf-8" /><title>cjy_20181021</title><link rel="stylesheet" type="text/css" href="css/main.css"/></head><body><div id="div-outer"><div id="div1" class="div-sprite">D1</div><div id="div2" class="div-sprite">D2</div><div id="div3" class="div-sprite">D3</div><div id="div4" class="div-sprite">D4</div><div id="div5" class="div-sprite">D5</div><div id="div6" class="div-sprite">D6</div><div id="div7" class="div-sprite">D7</div><div id="div8" class="div-sprite">D8</div><div id="div9" class="div-sprite">D9</div><div id="div10" class="div-sprite">D10</div><div id="div11" class="div-sprite">D11</div><div id="div12" class="div-sprite">D12</div></div></body></html>
#div-outer{width: 700px;height: 600px;border:2px solid blue;padding: 40px 0px 0px 30px;}.div-sprite{float: left;width: 125px;height: 125px;border:1px solid gray;margin: 20px;background-image: url(../img/1.jpg);background-repeat: no-repeat;overflow: hidden;text-align: center;font-family: "微软雅黑";font-size: 30px;color: blue;line-height: 120px;}.div-sprite:hover{background-image: url(../img/2.png);background-size: 123px 123px;background-position: 0px 0px !important;}#div1{background-position:6px 0 ;}#div2{background-position:-190px 0 ;}#div3{background-position:-366px -382px ;}#div4{background-position:-570px -188px ;}#div5{background-position:-570px 0 ;}#div6{background-position:-186px -190px ;}#div7{background-position:-374px 0 ;}#div8{background-position:0 -190px;}#div9{background-position:-188px -380px ;}#div10{background-position:-380px -190px ;}#div11{background-position:0px -380px ;}#div12{background-position:-186px -190px ;}所谓精灵图，短暂的百度看了几分钟，或许并未真正的了解。
就目前而言，我对其认知是： 多元素共用一个大背景图片，但通过background-position属性来只显示大图片的局部。
要实现这功能，最主要的是元素的尺寸控制。
另外，关于{background-position: 0px 0px !important;}中的!important用来提升CSS选择的优先级至最高。（这个和精灵图没有关联，只是刚好用到，记录一下）
CSS精灵图和!important提升CSS选择优先级
原文地址：https://www.cnblogs.com/phoenixBlog/p/9829487.html