精灵图

作者: Jay_ZJ | 来源:发表于2020-05-10 22:35 被阅读0次

概念

困扰

解决网页中小图像过多而引起的向服务器频繁接收和发送请求图片,造成服务器请求压力过大,降低页面加载速度的问题。

方案

因此,为了有效的减少服务器接收和发送请求的次数,提高页面的加载速度,出现了css精灵技术

原理
  • 将网页中的一些小背景图像整合到一张大图里,服务器只用请求一次
  • 这种图片称为雪碧图或者精灵图
  • 移动背景图片位置,此时可以使用background-position
  • 移动的距离就是这个目标的x和y坐标。注意网页中的坐标有所不同
  • 一般情况下都是往上往左移动,所以数值都是负值

场景

网页小背景图片多,服务器请求小图片次数过多

用法

  • 精灵图主要针对小的背景图片使用
  • 主要借助于背景位置来实现 -- background-position
  • 一般情况下精灵图都是负值

案例

image.png

相关文章

  • 08-精灵图的利弊

    CSS Sprites 、精灵图、 雪碧图 都是一个概念 * 我对精灵图的简单看法 关于精灵图我简单的介绍一下:...

  • 任务9- CSS常见技巧

    1、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 简介CSS Sprites(雪碧图|精灵图)是一种...

  • 逐帧自适应精灵图+css3实现小动画

    这个是固定像素的逐帧精灵图: 自适应任意尺寸的精灵图:

  • CSS精灵图

    什么是CSS精灵图? CSS精灵图是一种图像合成技术 CSS精灵图作用 可以减少请求次数,以及降低服务器处理压力 ...

  • CSS常见技巧

    1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS Sprite(雪碧图|精灵图)指该方法是将...

  • 饥人谷-任务9-2

    一、CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 css雪碧图又叫css精灵或css sprite,...

  • CSS精灵图

    什么是CSS精灵图? CSS精灵图是一种图像合成技术。 CSS精灵图作用: 可以减少请求的次数,降低服务器处理的压...

  • css精灵图

    一、什么是css精灵图?css精灵图是一种图像合成技术 二、css精灵图作用?可以减少请求的次数,以及可以降低服务...

  • 在线合成精灵图

    精灵图合成

  • 精灵图

    概念 困扰 解决网页中小图像过多而引起的向服务器频繁接收和发送请求图片,造成服务器请求压力过大,降低页面加载速度的...

网友评论

      本文标题:精灵图

      本文链接:https://www.haomeiwen.com/subject/pogjnhtx.html