CSS Sprites

  CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。对于当前网络流行的速度而言,不高于200KB的单张图片的所需载入时间基本是差不多的,所以无需顾忌这个问题。

  CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字精确的定位出背景图片的位置。
  在网页访问中,客户端每需要访问一张图片都会向服务器发送请求,所以,访问的图片数量越多,请求次数也就越多,造成延迟的可能性也就越大。
  所以,CSS Sprites技术加速的关键,并不是降低质量,而是减少个数,当然随之而来的增加内存消耗,CSS Sprites图片繁琐的合成等缺点在网站性能的提升前,也就不足为道了。

  CSS Sprites的使用:
    .bg_sprite{background-image:url(/整图地址); background-repeat:no-repeat}

    #ico1 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
    #ico2 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
    #ico3 {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
    .nav {width:容器宽度;height:容器高度;background-position:X坐标 Y坐标}
  当然也有简写方法:
    #ico1 {width:容器宽度;height:容器高度;background:url(/整图地址) no-repeat X坐标 Y坐标;}
  其中,X坐标和Y坐标表示原图相对于ico1框左上角点的偏移量,即 坐标 0 0表示背景图和ico1框的左上角点重合

  例子:
  图片"bg_sprite.png"
  
  代码  
 ico {width: 16px;height:16px;background: url("bg_sprite.png") no-repeat 0 -234px;}

  效果为:

  

【CSS】CSS Sprites (CSS 精灵) 技术的更多相关文章

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

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

  2. CSS Sprites (css精灵)

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

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

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

  4. CSS sprites(css 精灵):将小图标整合到一张图片上

    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...

  5. CSS 精灵技术(sprite)

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

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

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

  7. CSS——精灵技术

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

  8. css sprites(精灵图)如何使用?

    CSS Sprites是一种性能优化技术,一种网页图片应用处理方式:将多个图像组合成单个图像文件以在网站上使用的方法,以提高性能:也被称为css 精灵图. 网页通常包含多个图像.这些包括图标,按钮,徽 ...

  9. CSS精灵技术

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

  10. 认识CSS中精灵技术(sprite)和滑动门

    前端之HTML,CSS(十) 精灵技术与精灵图 精灵技术本质 精灵技术是一种处理网页背景图像的方式,实质是将小的背景图片拼接到一张大的背景图像上.拼接成的大图被称为精灵图.浏览器打开网页时,每一个图片 ...

随机推荐

  1. MacOS VMware Function安装win的ghost系统(亲测成功!!!)

    1.下载WEPE工具生成可启动ISO 下载WEPE工具 WEPE工具下载地址 下载完成之后,双击打开文件(无需安装,可直接制作可启动ISO) 点击立即生成ISO之后 2.将生成的可启动ISO文件和wi ...

  2. MVC4 4种Filter

    1. AuthorizationFilter: 从命名上看这个用于完成授权相关的工作. AuthorizationFilter 实现了 IAuthorizationFilter 接口, 如果我们希望执 ...

  3. Android-Activity临时数据的保存

    Activity临时数据的保存是非常重要的,例如:一款小说APP应用,读者使用这款APP看到了223页,用户也没有去记看了多少页: 突然去接了个电话,或者开启的应用程序太多了,可能会导致这款APP应用 ...

  4. SSL证书 .pem转.pfx

    使用OpenSSL来进行转换 OpenSSL官网没有提供windows版本的安装包,可以选择其他开源平台提供的工具.例如 http://slproweb.com/products/Win32OpenS ...

  5. MongoDB高级知识-易扩展

    MongoDB高级知识-易扩展 应用程序数据集的大小正在以不可思议的速度增长.随着可用宽带的增长和存储器价格的下跌,即使是一个小规模的应用程序,需要存储的数据也可能大的惊人,甚至超出了很多数据库的处理 ...

  6. 2. Python的划分

    解释型:当程序运行时,将代码从上至下,一句一句解释成二进制,在执行. 典型:python,php 优点:开发速度快,可以跨平台. 缺点:执行效率慢 编译型:将源码一次性转化成二进制文件,然后在执行. ...

  7. CAS客户端整合(一) Discuz!

    有好几个系统需要接入CAS,所以登录模块统统需要重构 版本 CAS服务端是Java的 Cas-server-4.0 CAS的php客户端 是 phpCAS-1.2.0 论坛版本是 Discuz!X3. ...

  8. leecode刷题(10)-- 旋转图像

    leecode刷题(10)-- 旋转图像 旋转图像 描述: 给定一个 n × n 的二维矩阵表示一个图像. 将图像顺时针旋转 90 度. 说明: 你必须在原地旋转图像,这意味着你需要直接修改输入的二维 ...

  9. bzoj 4283 魔法少女伊莉雅

    题目大意 给定一个 $n$ 个点 $m$ 条边的带正权无向图.要求找一条路径满足: 它是一条简单路径 它是一条严格次短路 对于任何一条可能存在于最短路上的边,不能包含它的反向边. 不存在这条路径输出 ...

  10. javascript中children,childNodes等节点属性

    1.children与childNodes children: 获取子元素节点,无兼容问题 childnNodes: IE:获取子元素节点 非IE(chrome,Firefox等):获取子节点,包括元 ...