精灵图(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导航页的精灵图。

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