CSS-Sprite
2018-06-06 本文已影响0人
Gettingjie
介绍与原理
CSS-Sprite 为将多张图片(一般为小的图标)拼合在一张大的图片中(可以通过减少http请求数来加快网页的加载速度)，通过每一个小块元素的 background-position 来定位其中的每一小张图片。
图 1
如图1所示
backgound-image 的左上顶点可以是为原点，x 和 y 轴以负方向来选择图片的起始显示位置，通过设定 backgorund-position 属性来实现( background-image 的默认起始显示位置为 backgorund-position: 0px 0px )。
Actor1.png
对于Actor1.png(来自RPGVXace)，其中的每小块图片的长和宽都为96px,于是显示这些图片的元素的
height 和 width 即可设为 96px ，根据图1，选择第一行第一列的块图即可为该元素设置 backgorund-position: 0px 0px ，选择第一行第二列的块图即可为该元素设置 backgorund-position: -96px 0px ，选择第二行第一列的块图即可为该元素设置 backgorund-position: 0px -96px ，以此类推。实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>CSS-Sprite</title>
<style>
li {
width: 96px;
height: 96px;
display: inline-block;
border: 1px solid yellowgreen;
background-image: url('Actor1.png');
background-repeat: no-repeat;
overflow: hidden;
}
.face1{
background-position: 0px 0px;
}
.face2{
background-position: -96px 0px;
}
.face3{
background-position: -192px 0px;
}
.face4{
background-position: -288px 0px;
}
.face5{
background-position: 0px -96px;
}
.face6{
background-position: -96px -96px;
}
.face7{
background-position: -192px -96px;
}
.face8{
background-position: -288px -96px;
}
</style>
</head>
<body>
<ul>
<li class="face1"></li>
<li class="face2"></li>
<li class="face3"></li>
<li class="face4"></li>
<li class="face5"></li>
<li class="face6"></li>
<li class="face7"></li>
<li class="face8"></li>
</ul>
</body>
</html>
于是，可以得到代码如上所示。
