css雪碧图的好处,什么是css sprites(雪碧图)，css sprites使用的优缺点

什么是css sprites?

css sprites：精灵图(雪碧图)：把一堆小图片整合在一张大图上，通过背景图片相关设置(背景图片、背景图是否重复、背景图定位)，显示图片，减轻服务器对图片的请求数量

css sprites优点：

1、减少网页的HTTP请求，提高页面性能

2、图片命名上的困扰

3、更换风格方便

css sprites缺点：

1、必须限定容器大小，符合背景图片元素的位置，需要计算

2、维护比较麻烦

css sprites使用步骤：

1、制作一张具有多状态的拼合图片，需要按照一定规律处理

2、给要显示背景的盒(一个固定尺寸，宽width、高height)，以背景的方式加载，让其局部显示

3、通过背景图定位(background-position)控制不同的显示状态

pixabayhttps://www.wode007.com/sites/73237.html wallhavenhttps://www.wode007.com/sites/73236.html

css sprites应用实例：

雪碧图实现原理

ul,h3{

margin: 0;

padding: 0;

}

h3{

display: block;

margin: 0;

padding: 0;

}

.cat{

position: relative;

width: 150px;

background-color: #f8f8f8;

border: 1px solid #bbb;

}

li{

z-index: 2;

position: relative;

display: block;

height: 31px;

line-height: 31px;

overflow: hidden;

margin: 1px 10px 0;

vertical-align: bottom;

border-bottom: 1px solid #dedede

}

li:hover{

background-color:#666666;

}

li h3{

font-size: 13px;

font-weight: 400;

}

li i{

display: inline;

float:left;

margin: 3px 10px 0 0;

height: 24px;

width: 30px

}

/* 在这里补充雪碧图的样式 */

li>i{

background:url('http://img.mukewang.com/539a950e00015ba500710200.jpg');

}

.cat-2>i{

background-position:0 -24px;

}

.cat-3>i{

background-position:0 -48px;

}

.cat-4>i{

background-position:0 -72px;

}

.cat-5>i{

background-position:0 -96px;

}

.cat-6>i{

background-position:0 -120px;

}

.cat-7>i{

background-position:0 -144px;

}

.cat-8>i{

background-position:0 -168px;

}

• 服装内衣

• 鞋包配饰

• 运动户外

• 珠宝手表

• 手机数码

• 家电办公

• 护肤彩妆

• 母婴用品