1.解释
英文叫法 css sprites,通常被解释为“CSS 图像拼合”或“CSS 贴图定位”;其实就
是把网页中一些背景图片整合到一张图片文件中,再利用 CSS “background-image”,
“background- repeat”,“background-position”的组合进行背景定位,background-position 用数字能精确的定位出背景图片的位置。适用于一般小图标,不适合大背景大布局背景
2.优点
(1)减少网页的 http 请求,从而大大的提高页面的性能
(2)图片命名上的困扰
(3)更换风格方便
3.缺点
(1)必须要限定容器大小符合背景图元素位置,需要计算
用法
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.messageBox {
/* 背景盒子的属性 */
margin: 100px auto ;
width: 30px;
height: 30px;
border:1px solid red;
/*把整张精灵图以背景图的方式引入*/
background-image: url(./image/com-toolbar.png);
/* 背景定位属性 向左向上移动当前背景图片 */
/*-363px -143px是此小图片在整张精灵图中的 x轴 y轴位置坐标*/
background-position: -363px -143px;
}
</style>
</head>
<body>
<div class="messageBox"></div>
</body>
</html>