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

标签：合成   提高   family   info   strong   spl   技术   width   控制   

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

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

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

标签：合成   提高   family   info   strong   spl   技术   width   控制   

原文地址：https://www.cnblogs.com/xialy520cxm/p/10108900.html