css sprite即CSS雪碧图又称CSS精灵。
它存在的一个主要作用就是：减少了网页的http请求次数，从而大大的提高了页面的性能,节省时间和带宽。

例如

这样算下来。CSS sprite真的是个很实用的东西。

那么如何制作CSS sprite图呢？
用下面这个例子来说明

这样一个图 就能用css sprite来制作。很好的减轻了服务器的压力。和页面的性能。

代码图如上。

另外推荐一个css sprite网站

个人对于css sprite的一点点见解的更多相关文章

  1. GWT 中实现“CSS Sprite”

    近段时间在弄GWT这一块,开发中遇到的一些不错的方法或者技巧,在此做个分享和记录,有不同见解可发表意见  互相切磋. 在web开发中,必然涉及到网页中的图片,本地浏览网页,要下载在服务器端的图片,然后 ...

  2. css sprite，css雪碧图生成工具V3.0更新

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

  3. css sprite 调整大张图片中小图标的大小

    直接说解决方法: 假设一张拼合好的大图大小是:900 x 1000 px (如上图) 现在想取图中左上角的河马图标,并缩小图标的大小. 正常取图: .sprite { background: url( ...

  4. HTML CSS SPRITE 工具

    推荐一个CSS SPRITE工具 网盘分享:http://pan.baidu.com/s/1sjx7cZV

  5. CSS Sprite雪碧图应用

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

  6. CSS雪碧，即CSS Sprite 简单的例子

    CSS Sprite生成工具 http://pan.baidu.com/s/1gdGQwiJ 工具可将多幅图片整合一张,并生成CSS. HTML代码 <style> .img{backgr ...

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

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

  8. CSS Sprite 图标

    HTML <body> <!-- ul.sprite>li*5>s.s-icon+a{CSS Sprite} --> <!-- 以上是Sublime Text ...

  9. CSS Sprite 雪碧图制作

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

随机推荐

  1. 【转】如何彻底删除SVN中的文件和文件夹(附恢复方法)

    这里假设SVN项目的目录为 /data/svn/project,我们想排除trunk/test.exe文件和trunk/notallowed/目录,操作步骤如下及执行的svn命令(在svn安装目录的b ...

  2. Python - json和simplejson比较（转）

    From:https://stackoverflow.com/questions/712791/what-are-the-differences-between-json-and-simplejson ...

  3. Hibernate通过one-to-one元素的一对一映射

    正如我们在前面的例子中讨论过的,在hibernate中执行一对一映射有两种方法: 通过many-to-one元素 通过one-to-one元素 这里,我们将通过one-to-one元素进行一对一的映射 ...

  4. jQuery + Cookie引导客户操作

    网址:http://www.sucaihuo.com/js/707.html 示例:http://www.sucaihuo.com/jquery/7/707/demo/

  5. input框限制0开头的数字(0除外)

    用到parseInt() 函数 parseInt() 函数可解析一个字符串,并返回一个整数 提示和注释 注释:只有字符串中的第一个数字会被返回. 注释:开头和结尾的空格是允许的. 提示:如果字符串的第 ...

  6. Unicode与UTF-8互转（c语言和lua语言）

    1. 基础 1.1 ASCII码 我们知道, 在计算机内部, 全部的信息终于都表示为一个二进制的字符串. 每个二进制 位(bit)有0和1两种状态, 因此八个二进制位就能够组合出 256种状态, 这被 ...

  7. spring-security+hibernate4+quartz实现的心跳检测项目（转 收藏）

    转自:http://www.52itstyle.com/thread-27470-1-1.html HeartBeat. ~2 Z8 U! ?8 r心跳检测各类应用服务器(如Tomcat,Jetty) ...

  8. Android无线测试之—UiAutomator UiSelector API介绍之五

    对象搜索—文本与描述 一.文本属性定位对象: 返回值 API 描述 UiSelector test(String text) 文本完全匹配 UiSelector testContains(String ...

  9. 【BZOJ2793】[Poi2012]Vouchers 调和级数

    [BZOJ2793][Poi2012]Vouchers Description 考虑正整数集合,现在有n组人依次来取数,假设第i组来了x人,他们每个取的数一定是x的倍数,并且是还剩下的最小的x个.正整 ...

  10. 关于在react和node中，经常出现的const

    const是定义一个常量,在ECM6当中,定义局部变量可以用let.定义全局变量用var......这是ECM6的新特性,好吧,包子在这里只是记录一下,希望大家在将来写react或者node的时候,不 ...