雪碧图(精灵图)

在网页中使用雪碧图的目的主要是为了优化页面性能,因为页面中每一张图片都需要提交一次HTTP请求,当图片过多的时候会使得加载量过大,然后给页面的加载造成负担,甚至出现卡顿的现象

 

雪碧图的应用场景:

(1)一般来说小的图标是要合成雪碧图的;

(2)一些大图片或者动态加载的图片不适合使用精灵图,

 

雪碧图的实现原理:

(1)需要一个设置好宽高的容器,将雪碧图作为background

(2)通过设置background-position的值来移动图片的位置

 

优缺点:

优点是减少http请求的次数,缓解了请求压力;缺点是小图标在高清屏上可能会失真,另外平凡定位会占用较多的CPU。

 

例子如下:


    "en">
    
        "UTF-8">
        雪碧图
    
    
    
        
class="LOGO">
  • class="logo-1">

    服装内衣

  • class="logo-2">

    鞋包配饰

  • class="logo-3">

    运动户外

  • class="logo-4">

    居家饰品

  • class="logo-5">

    居家家具

  • class="logo-6">

    爱上喝水

  • class="logo-7">

    私家车

  • class="logo-8">

    乐器类

合成的雪碧图以及最终效果:

雪碧图(精灵图)_第1张图片               雪碧图(精灵图)_第2张图片

 

转载于:https://www.cnblogs.com/xiaoan0705/p/11281354.html

你可能感兴趣的:(雪碧图(精灵图))