<!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选择的优先级至最高。(这个和精灵图没有关联,只是刚好用到,记录一下)