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. void bind(String sName,Object object);――绑定：把名称同对象关联的过程

    void bind(String sName,Object object);――绑定:把名称同对象关联的过程 void rebind(String sName,Object object);――重新绑 ...

  2. Spring MVC多解析器映射

    如果想在spring mvc应用程序中使用多个视图解析器,那么可以使用order属性设置优先级顺序. 以下示例显示如何在Spring Web MVC框架中使用ResourceBundleViewRes ...

  3. NewtonSoft.Json NULL转空字符串

    from:http://www.cnblogs.com/hetuan/articles/4565702.html NewtonSoft.Json对需要转为JSON字符串的对象的NULL值以及DBNul ...

  4. [ Google APAC 2015 University Graduates Test ] Round C APAC Test

    题目链接: http://code.google.com/codejam/contest/5214486/dashboard Problem A. Minesweeper 题目意思: 扫雷.告诉地雷所 ...

  5. Netdata安装和使用（Linux 性能实时监测工具）

    Netdata 是一款 Linux 性能实时监测工具..以web的可视化方式展示系统及应用程序的实时运行状态(包括cpu.内存.硬盘输入/输出.网络等linux性能的数据). Netdata文档地址: ...

  6. poj3096

    C++的标准模版库的应用 Surprising Strings Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 6625   ...

  7. 【BZOJ3158】千钧一发 最小割

    [BZOJ3158]千钧一发 Description Input 第一行一个正整数N. 第二行共包括N个正整数,第 个正整数表示Ai. 第三行共包括N个正整数,第 个正整数表示Bi. Output 共 ...

  8. 摄像机互联网直播之EasyCloud云平台与EasyNVS云端管控的全局对比

    背景分析 近期,Easy系列推出了EasyNVS,在功能上也是可以满足将内网的视频直播转发到公网,再由公网进行视频流的分发. 听起来和EasyCloud功能上是冲突的,其实两者之间的差别还是存在的,本 ...

  9. virsh命令行管理工具

    virsh命令行管理工具 Libvirt有两种控制方式,命令行和图形界面 图形界面: 通过执行名virt-manager,启动libvirt的图形界面,在图形界面下可以一步一步的创建虚拟机,管理虚拟机 ...

  10. javascript基础(整理自廖雪峰)

    不要使用==比较,始终坚持使用===比较false == 0; //返回true. 这种情况, 它会自动转换数据类型再比较false === 0; //返回false. 建议用这种方式 NaN === ...