CSS Sprites 图片整合技术分析

  发布时间:2009-06-21 17:28:30   作者:佚名   我要评论
论坛上提到这样的问题:“css中用一张背景图做页面的技术有什么优势?” 简单介绍一下 CSS Sprites 的优点: 当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。 CSS Sprites 的目的就是通过整合图片,减少对服务器的请

论坛上提到这样的问题:“css中用一张背景图做页面的技术有什么优势?”

简单介绍一下 CSS Sprites 的优点:

  • 当用户往U盘中拷200张图片,会等很久。但是如果弄成一个文件,再拷贝就会快很多。
  • CSS Sprites 的目的就是通过整合图片,减少对服务器的请求数量,从而加快页面加载速度。

实现方法

  1. 首先将小图片整合到一张大的图片上
  2. 然后根据具体图标在大图上的位置,给背景定位。


复制代码
代码如下:

background-position:-8px -95px;

相关文章

  • CSS Sprites 样式生成工具 3.0

    很高兴为大家带来了CSS Sprites 样式生成工具 3.0版本。 保存的设置文件也同时更新了,支持打开旧的文件,会以新的格式保存(旧版本打不开)。 操作界面做了小小的调整
    2009-06-23
  • CSS Sprites简介以及优缺点

    阿里妈妈UED谈CSS Sprites技术.
    2009-10-20
  • css sprites把很多小图集成在一张图片上

    网页制作Webjx文章简介:在google中搜索一下css sprites这个名称,会查出很多信息,并且随着SEO越来越被人们重视,采用这种技术来进行图片优化的网站越来越多,国内几家大
    2009-04-02
  • CSS Sprites 技术分析

    CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea就在ALA发表对该技术的详细阐述。原先只在CSS玩家之间作为一种制作方法流传,后来出来个14 Rules for F
    2009-04-24
  • css sprites技术将多个背景集成到一个png图片上css定位

    美国YAHOO在页面制作中所用到的图片整合技术,首先将小图片整合到一张大的图片上,然后根据具体图标在大图上的位置,给背景定位,感兴趣的朋友可以了解下具体的实现方法
    2013-04-02
  • CSS Sprites详解

    CSS Sprites技术不新鲜,早在2005年 CSS Zengarden 的园主 Dave Shea 就在 ALA 发表对该技术的 详细阐述 。原先只在CSS玩家之间作为一种制作方法流传,后来出来个 14 Rules
    2011-08-02
  • 如何使用CSS sprites减少HTTP请求

    CSS sprites是指把网页中很多小图片(很多图标文件)做成按规律排列的一张大图上,在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一
    2013-10-10
  • CSS Sprites实现图片分组动画效果源码

    CSS Sprites就是可以将许多图片集成在一张大图上,然后利用CSS的图片定位技术将其分割开来。这款CSS3图片效果就是可以将分割完的小图片实现分组的动画效果,我们只需要点击
    2014-09-20
  • 浅谈CSS Sprites切图技术

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位
    2014-12-12

最新评论