一、精灵图使用场景：

二、Css Sprite（优点）

  1. 减少图片的字节。
  2. 减少网页的http请求，从而大大的提高页面的性能。
  3. 解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
  4. 更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

三、实现原理

css background-position

控制一个层可显示的区域范围大小，
通过一个窗口进行背景图的滑动
实例：

代码如下：

  1. <!doctype html>
  2. <html>
  3.     <head>
  4.         <meta charset="utf-8"/>
  5.         <title>background-position<</title>
  6.         <link rel="stylesheet" href="index.css"/>
  7.     </head>
  8.     <body>
  9.         <span class="oo span1"></span>
  10.         <span class="oo span2"></span>
  11.         <span class="oo span3"></span>
  12.         <span class="pp span4"></span>
  13.         <span class="ll span5"></span>
  14.         <span class="hh span6"></span> 
  16.     </body>
  17. </html>
  18. .body{
  19.     margin:0 auto;
  20.     text-align:center;
  21. }
  22. .oo{
  23.     display:block;
  24.     width:43px;
  25.     height:44px;
  26.     background:url(images/img_navsprites_hover.gif) no-repeat;
  27.     margin:20px auto;
  28. }
  29. .span1{
  30.     background-position:0 0;
  31.     position:absolute;
  32.     top:0px;
  33. }
  34. .span2{
  35.     background-position:-47px 0;
  36.     position:absolute;
  37.     top:0px;
  38.     left:60px;
  39. }
  40. .span3{
  41.     background-position:-94px 0;
  42.     position:absolute;
  43.     top:0px;
  44.     left:120px;
  45. }
  46. .span1:hover{
  47.     background-position:0 -45px;
  48. }
  49. .span2:hover{
  50.     background-position:-47px -45px;
  51. }
  52. .span3:hover{
  53.     background-position:-94px -45px;
  54. }
  55. .pp{
  56.     display:block;
  57.     width:38px;
  58.     height:38px;
  59.     background:url(images/pwd-icons-new.png) no-repeat;
  60.     margin:20px auto;
  61. }
  62. .span4{
  63.     background-position:-48px -96px;
  64. }
  65. .ll{
  66.     display:block;
  67.     width:24px;
  68.     height:26px;
  69.     background:url(images/TB1eiXTXlTH8KJjy0FiXXcRsXXa-24-595.png) no-repeat;
  70.     margin:20px auto;
  71. }
  72. .span5{
  73.     background-position:0 -483px;
  74. }
  75. .hh{
  76.     display:block;
  77.     width:18px;
  78.     height:18px;
  79.     background:url(images/toolbars.png) no-repeat;
  80.     margin:20px auto;
  81. }
  82. .span6{
  83.     background-position:-95px -211px;
  84. }

**background-position:npx npx;
（第一个值是调左右的，当你需要将背景图向右调的时候用正值， 向左则为负值 同理将背景图上下调动的时候上是用负值，下是正值）**
<2>效果图如下：
（这是原图）

（这是选完以后的图）

第一幅图是原图与暗图的转换；选了第二幅图的锁；第四幅图的火车；第五幅图的小人。

刚入前端写的不好见谅！！！(^o^)/~

Css Sprite(雪碧图、精灵图)<图像拼合技术>的更多相关文章

  1. CSS Sprite雪碧图的应用

    CSS雪碧图,即CSS Sprite,也有人叫它CSS精灵图,是一种图像拼合技术.该方法是将多个小图标和背景图像合并到一张图片上,然后利用CSS的背景定位来显示需要显示的图片部分. 雪碧图的使用场景 ...

  2. CSS Sprite 雪碧图制作

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

  3. CSS Sprite雪碧图

    为了减少http请求数量,加速网页内容显示,很多网站的导航栏图标.登录框图片等,使用的并不是<image>标签,而是CSS Sprite雪碧图. 两个小例子: 淘宝首页的侧栏图 代码 &l ...

  4. css sprite 雪碧图

    使用雪碧图的目的:有时为了美观,我们会使用一张图片来代替一些小图标,但是一个网页可能有很多很多的小图标,浏览器在显示页面的时候,就需要像服务器发送很多次访问请求, 这样一来,一是造成资源浪费,二是会导 ...

  5. CSS Sprite雪碧图应用

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

  6. 【HTML+CSS】(2)CSS Sprite雪碧图

    1. 雪碧图的使用场景 (1). 静态图片.不随用户信息的变化而变化 (2). 小图片.图片容量比較小 (3). 载入量比較大 一些大图不建议拼成雪碧图,比如淘宝站点的导航图片都是使用的雪碧图. 2. ...

  7. CSS Sprites (CSS图像拼合技术)教程工具

    什么是CSS Sprites? “Sprite”(精灵)这个词在计算机图形学中有它独特的定义,由于游戏.视频等画质越来越高,必须有一种技术可以智能的处理材质和贴图,并且要 同时保持画面流畅.“Spri ...

  8. CSS Sprites(CSS图像拼合技术)教程、工具集合

    本集合是有一位国外设计师收集整合,并由 oncoding翻译成中文的,感谢他们的辛苦贡献.CSS Sprites技术在国外并不是什么新技术,只不过近两年(尤其08年开始)中国开始流行这个词,大家也开始 ...

  9. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

随机推荐

  1. Fiddler给网站“优化”

    最近访问某知名网站的速度非常慢,有时候需要2分钟还没完全打开,页面展示了一半就卡住,然后等半天才继续显示下面部分.这种情况已经有几个月了,不知道是他们服务器原因还是我所在网络的问题,但是基本上在其他网 ...

  2. [PE格式分析] 2.IMAGE_DOS_HEADER

    typedef struct _IMAGE_DOS_HEADER { // DOS .EXE header WORD e_magic; // Magic number 固定为"MZ" ...

  3. 第四次工业革命：人工智能（AI）入门

    转载自 http://www.infoq.com/cn/articles/the-fourth-industrial-revolution-an-introduction-to-ai "过去 ...

  4. 浅谈App原生开发、混合开发及HTML5开发的优劣

    App混合开发(英文名:Hybrid App),是指在开发一款App产品的时候为了提高效率.节省成本即利用了原生的开发技术还应用了HTML5开发技术,是原生和HTML5技术的混合应用.目前App的开发 ...

  5. STL算法分类记忆

    STL算法主要是我们强大的标准库中以迭代器或数值或函数对象为参数预先定义好的一系列算法操作. 在STL算法分类中首先要提的就是两个普遍存在的后缀: _if _copy 其中这两个后缀的作用分别是:一. ...

  6. python多进程与协程

    1.进程的概念 什么是进程->CPU在同一时刻只能处理一个任务,只是因为cpu执行速度很快. cpu在各个任务之间来回的进行切换. 进程的概念:正在进行的一个过程或者说一个任务,而负责执行任务的 ...

  7. GridControl 应用 z

    DevExpress学习系列(控件篇):GridControl的基本应用 一般属性设置 不显示分组框:Gridview->Option View->Show Group Panel=fal ...

  8. IE浏览器兼容问题(下)——IE6的常见问题

    IE6常见兼容性问题 1.盒模型问题 (1)DTD问题 DTD:文档定义类型,规定了要遵循的书写规范. 如果不写DTD,高级浏览器还是可以正常加载,IE6会以怪异模式进行加载. 盒模型:正常应该是外扩 ...

  9. 电脑断电后Everything部分文件搜索不到的解决办法

    常规检查:查看选项→索引→NTFS,确认所有分区都[包含到数据库],确认后,再删除数据库文件,点击[强制重建] 下面方法是亲身经历,是断电造成的,费了不少时间才解决,现分享出来: 断电后,Everyt ...

  10. Django 创建模型 激活模型 简单的使用模型

    创建模型: 在你的开发环境中,已经有一个“项目” —— 已经建立起来,你将开始在上面做一些东西. 你编写的每个Django应用都是一个遵循特定约定的Python包. Django自带一个工具,它可以自 ...