一、精灵技术产生的背景

  图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。

  然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的加载速度,出现了CSS精灵技术(也称CSS Sprites、CSS雪碧)。

二、精灵技术本质

  CSS精灵是一种处理网页背景图像的方式。它将一个页面涉及到的所有零星背景图像都集中到一张大图中去,然后将大图应用于网页,这样,当用户访问该页面时,只需向服务发送一次请求,网页中的背景图像即可全部展示出来。通常情况下,这个由很多小的背景图像合成的大图被称为精灵图(雪碧图),如下图所示为京东网站中的一个精灵图。

  

三、精灵技术的使用

  CSS 精灵其实是将网页中的一些背景图像整合到一张大图中(精灵图),然而,各个网页元素通常只需要精灵图中不同位置的某个小图,要想精确定位到精灵图中的某个小图,就需要使用CSS的 background-image、background-repeat background-position属性进行背景定位,其中最关键的是使用background-position属性精确地定位。

  Tips:背景图片很少的情况,没有必要使用精灵技术,维护成本太高。 如果是背景图片比较多,可以建议使用精灵技术。

CSS 精灵技术(sprite)的更多相关文章

  1. CSS精灵技术

    在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的, ...

  2. CSS——精灵技术

    精灵技术产生的背景 图所示为网页的请求原理图,当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户. 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中 ...

  3. CSS精灵技术(sprite)

    CSS技术的使用场景:有效的减少了服务器接收和发送请求的次数,css精灵是一种出来网页背景图像的方式,将一个页面设计到的所有零星背景图集中到一张大图中去,然后将大图应用于网页 .通过backgroun ...

  4. CSS Sprites (CSS 精灵) 技术

    CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢 ...

  5. 【CSS】CSS Sprites (CSS 精灵) 技术

    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...

  6. CSS3与页面布局学习笔记(五)——Web Font与CSS Sprites(又称CSS精灵、雪碧图)技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  7. CSS之 元素显示隐藏,用户界面样式,文本溢出隐藏,精灵技术,三角形

    元素的显示与隐藏 display 显示 display 设置或检索对象是否及如何显示 display: none; 隐藏对象 display: block; 除了转换为块级元素, 同时还有显示元素的意 ...

  8. css:background-position > 精灵技术

    background-position : length || length background-position : position || position 取值: length  : 百分数 ...

  9. CSS——精灵图与背景图片定位

    精灵图产生背景: 1.网页上的每张图像都需要向服务器发送一次请求才能展现给用户.2.网页上的图像过多时,服务器就会频繁地接受和发送请求,大大降低页面的加载速度.为了有效地减少服务器接受和发送请求的次数 ...

随机推荐

  1. es4x 使用nodejs 开发vertx 应用框架试用

    es4x 是将vertx 的特性带到nodejs 的开发中,性能很不错,同时开发方式和nodejs 一样,可以加速vertx 应用的开发,同时也可以方便的集成java 软件包,提供的cli 工具也很方 ...

  2. DIV 始终位于文档底部

    DIV 始终位于文档底部 设置body为绝对定位,最小显示高度为:100%,宽度为:100%: 设置底部显示块为绝对定位,bottom: 0,是body元素的最后一个直接子元素: 设置底部块元素同级元 ...

  3. [RN] React Native 使用 teaset(Drawer)实现侧边菜单

    https://www.cnblogs.com/crazycode2/p/9537518.html

  4. (转)简单的Malloc实现

    现在,一般来说,我们可以实现malloc使得对malloc的调用将会被映射到系统调用sbrk上,sbrk(n)将会移动程序中断的位置-也就是程序的data段的最后.-偏移n个字节,这意味着,n个字节的 ...

  5. PATA1031 Hello World for U

    参考代码: #include <cstdio> #include <cstring> int main() { char str[100], ans[40][40]; scan ...

  6. 批量转换文件字符编码(GBK转UTF-8)

    今天收到一份代码,拖到IDE中发现乱码,看来下编码是GBK的(

  7. C++ new delete 一维数组 二维数组 三维数组

    h----------------------------- #include "newandmalloc.h" #include <iostream> using n ...

  8. List 拆分集合与 读写XML配置文件

    有时候会出现需要将一个集合分成所干个集合,依次再对每组集合进行处理,想了想,用 Linq 处理就很方便 ); ).Take(); //第一组 ).Take(); //第二组 ; i < time ...

  9. 使用Ajax (put delete ) django原生CBV 出现csrf token解决办法

    原因 django原生CBV中对于 Ajax put 或 delete 请求进行封装时,会把请求数据放在 request.body里, 所以获取不到csrf token 方式一: 关闭csrf 中间件 ...

  10. Selenium基础教程(二)环境搭建

    一.环境搭建 (1)初学者最佳环境: Python 2.7 + Selenium 2+ Firefox 46 (2)喜欢尝新的环境: Python 3.6 + Selenium 3+ Firefox ...