精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术

精灵图
精灵图(css sprites,css精灵,css雪碧,雪碧图),图片整合技术
原理:将多张单一的图片整合到一张图上，以背景引入,并使用background-position调整背景位置，使之显示不一样图片
目的:下降浏览器向服务器的请求次数,提升网页加载速度
优势:下降请求次数,多张图整合成一张下降总体大小,整改一张图使得总体风格主题改变,提升维护性
缺点:自适应布局难控制,制做繁琐,不合理的整合图片会致使调用混乱,一张图更改致使总体变化(牵一发动全身)

<div class="sprites"></div>

.sprites:before{
    content: "";
    display: block;
    width: 17px;
    height: 17px;
    background: #999;
    background-image: url(img/sprites1.png);
    background-repeat: no-repeat;
    background-position: 0 -118px;
}

 

PS：借用360导航页的精灵图。

声明：如有侵权等问题请联系做者，定当及时改正、致歉和删除有问题的文章！