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. 结构体成员管理AVClass AVOption之2AVOption,设置选项值

    AVOption用于在FFmpeg中描述结构体中的成员变量.一个AVOption可以包含名称,简短的帮助信息,取值等. 上篇文章中概括了AVClass,AVOption和目标结构体之间的关系.以AVF ...

  2. datagrid返回记录为0时显示“没有记录”

    datagrid返回记录为0时显示“没有记录”,此问题的 <script>var myview = $.extend({},$.fn.datagrid.defaults.view,{ on ...

  3. UFLDL深度学习笔记 （一）反向传播与稀疏自编码

    UFLDL深度学习笔记 (一)基本知识与稀疏自编码 前言 近来正在系统研究一下深度学习,作为新入门者,为了更好地理解.交流,准备把学习过程总结记录下来.最开始的规划是先学习理论推导:然后学习一两种开源 ...

  4. 数值孔径NA、分辨率极限与衍射极限

    一.数值孔径  数值孔径(NA):是一个无量纲的数,用以衡量该系统能够收集的光的角度范围.越大,收集到的光越多,分辨率越高. 描述了透镜收光锥角的大小,决定着透镜收光能力和空间分辨率. 数值孔径(NA ...

  5. day11函数的进阶动态参数，命名空间，作用域，第一类对象

    一.习题收藏 5.写函数,计算传入字符串中[数字].[字母].[空格] 以及 [其他]的个数,并返回结果. # def func4(s): # dic = { # 'num':0,'alpha':0, ...

  6. day6笔记

    一.上节回顾 list:li = [1,2,3,5,'a']增加:append:末尾加入==追加 insert:插入,在任意位置,insert(index,'内容') extend:迭代着加入,'as ...

  7. python数据分析之numpy

    知乎:https://zhuanlan.zhihu.com/p/26514493 numoy安装:http://blog.csdn.net/wyc12306/article/details/53705 ...

  8. 微信公众平台开发：进阶篇(Web App开发入门)

    本文转载至:http://blog.csdn.net/yual365/article/details/16820805  WebApp与Native App有何区别呢? Native App: 1.开 ...

  9. hibernate createQuery查询传递参数的两种方式

    String hql = "from InventoryTask it where it.orgId=:orgId"; Session session = getSession() ...

  10. BZOJ 2431

    2431: [HAOI2009]逆序对数列 Time Limit: 5 Sec  Memory Limit: 128 MBSubmit: 1521  Solved: 883[Submit][Statu ...