雪碧图

  是一种将网页上常用且不经常变动的小图标集中在一张大图中,根据网页需求来显示图片的技术。

可以提高网页加载速度,增加用户体验。

  其原理是通过html块状元素建立一个满足需求的视图窗口,然后在窗口背景中载入处理过的、规则

的集成了小图的大图。图片加载后,根据需求来测量出需要小图的坐标,让其准确的显示在我们建立好的

窗口中。

  它的好处是我们可以与后台交互一次,就可以满足网页上很多小图标的加载。

  它的劣势在于,如果每次修改都会较为麻烦,容易出错。

  所以,经常将它用在不怎么会经常改动的icon小图标中,而经常要变动的图片则不建议用。

雪碧图(sprite)的更多相关文章

  1. 移动端适配之雪碧图(sprite)背景图片定位

    为了减少网络请求个数量,提高网站的访问速度,我们一般都会把一些小的图片合并成一张sprite图,然后根据background-position来进行定位.在web端由于是固定的大小与left .top ...

  2. FIS 雪碧图sprite合并

    1 安装fis(必须先安装node和npm):npm install -g fis3 2 构建项目发布到根目录下的output:fis3 release -d ./output 项目根目录:FIS3 ...

  3. 关于css雪碧图sprite

    天气转凉了,又开始贪恋暖暖的被窝了. 早上不想起床的时候在被窝里看了有关于雪碧图的视频. 1.使用场景 V导航条,登录框img标签多次载入,性能低 X大图banner按需加载,如果做成雪碧图一次加载就 ...

  4. 移动端雪碧图sprite的实现

    移动端适配的时候,通常是用rem作为长宽单位,因此,在不同的设备下,元素的实际宽高(px)是不一样的,如果是单张图片作为为背景图片的时候,最为方便,只要设置背景图片的属性background-size ...

  5. CSS Sprite雪碧图应用

    在写网页过程中,会遇到这种需要使用多个小图标: 如上图中的「女装」文字左边的图标.容易想到的解决方法是为每张图片加入<img>标签,但这样做会增加HTTP请求数量,影响网站加载速度.比这更 ...

  6. 前端工程师技能之photoshop巧用系列第五篇——雪碧图

    × 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇——雪碧图 定义 css雪碧图(sp ...

  7. css中雪碧图(sprite)的使用及制作方法

    雪碧图(sprite)是减少请求次数的有效手段,其原理是把多张图片进行合成,使用时通过css进行定位. 1.先看一下雪碧图 没有使用雪碧图时图标是这样一个个的单独文件: 合成雪碧图后是这样拼在一起的一 ...

  8. css sprite,css雪碧图生成工具V3.0更新

    V3.0主要改进 1.增加了单独添加单张图片以及删除单张图片的功能 2.增加了生成.sprite文件用以保存雪碧图信息 3.增加了打开.sprite文件功能 什么是css sprite CSS spr ...

  9. 使用compass自动合并css雪碧图(css sprite)

    本文转载自: 使用compass自动合并css雪碧图(css sprite)

  10. CSS Sprite 雪碧图制作

    CSS Sprite 雪碧图,简单来说就是: 为了提高网页的性能,减少加载次数,将一些不会经常随网站内容变化的小图标,集中放在一张大图上,将该图应作为background-image 嵌入页面中,在需 ...

随机推荐

  1. @RenderSection

    @RenderSection在母版页中先占个位置,然后在使用该母版的页面中在各自去实现自己的Section. 在母版页_Layout.cshtml中使用格式为 @RenderSection(" ...

  2. Core开发-MVC 使用dotnet 命令创建Controller和View

    NET Core开发-MVC 使用dotnet 命令创建Controller和View   使用dotnet 命令在ASP.NET Core MVC 中创建Controller和View,之前讲解过使 ...

  3. NET Core 的 Views

    NET Core 十种方式扩展你的 Views 原文地址:http://asp.net-hacker.rocks/2016/02/18/extending-razor-views.html作者:Jür ...

  4. cdn与http缓存

    http缓存与cdn相关技术   摘要:最近要做这个主题的组内分享,所以准备了一个星期,查了比较多的资料.准备的过程虽然很烦很耗时间,不过因为需要查很多的资料,因此整个过程下来,对这方面的知识影响更加 ...

  5. OSG中的几何体

    osg::Shape类 继承自osg::Object类: osg::Shape类是各种内嵌几何体的基类,不但可以用于剔除和碰撞检测,还可用于生成预定义的几何体对象: 常见的内嵌几何体包括: osg:: ...

  6. SQL Server MYSQL 检查点的好处

    执行检查点时: 如果一个事务不没有提交.日志缓存还是会被更新到磁盘上的物理文件. 这样做就使得大事务commit 时也特别快!

  7. (13)[Xamarin.Android] 不同分辨率下的图片使用概论

    原文 [Xamarin.Android] 不同分辨率下的图片使用概论 设计Android App的时候,其尺寸众多也是一个挑战之一.要针对不同尺寸设计Android App时,就要先来了一下dpi(d ...

  8. MCI 函数与命令

    Microsoft 提供的 MMSYSTEM.H 文件中定义了调用 MCI 功能的数据类型和函数原型.在使用 MCI 功能的任何源模块中都应包含该文件. 1. MCI 函数 所有的 MCI 函数名都以 ...

  9. [虚拟化/云][全栈demo] 为qemu增加一个PCI的watchdog外设(六)

    目的: 1. 为我们自己的watchdog写一个驱动 步骤: 通过之前的介绍,我们很容易猜想到写我们基于PCI的watchdog驱动,可以分2个步骤. 1. 探测加载PCI设备 这部分代码跟我们的设备 ...

  10. C++ *max_element函数找最大元素 *min_element函数找最小元素 STL算法(转)

    http://blog.sina.com.cn/s/blog_6f3a860501019z1f.html #include<iostream> #include<algorithm& ...