目录
一、介绍
CSS精灵图是把一堆小的图片整合到一张大的图片上,这样可以减轻服务器对图片的请求数量,再利用CSS的 background-image,background- repeat,background-position 组合进行定位
二、优点
减少网页的请求、提高页面性能、减少图片的字节
三、使用步骤
步骤一
先写一个存放精灵图的标签,一般习惯用<i></i>标签,<span>也可
<span></span>
<i></i>
步骤二
因为i或span标签是行内式,需要转换为块级元素 diaplay:block
步骤三
将精灵图用ps或者其他图片软件打开,测量大小,如图,并设置宽高
width: 42px;
height: 50px;
步骤四:引入所需精灵图
background-image: url();
步骤五
通过测量精灵图在整张图片中的位置距离,并使用 background-position 进行移动,如图,由图像可知,距离顶部有5px,距离左边有15px。
background-position: -水平距离 -垂直距离;
background-position: -15px -5px;
四、步骤代码总结
i {
display: block;
width: ;
height: ;
background-image: url(xxxx);
background-position: xx xx;
}