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. java 获取网页指定内容-2（实践+修改）

    import java.io.BufferedReader; import java.io.InputStreamReader; import java.net.HttpURLConnection; ...

  2. oracle密码过期解决方法

    Oracle提示错误消息ORA-28001: the password has expired 在oracle服务器上用sqlplus / as sysdba登录进去,可以通过下面的sql语句查看账户 ...

  3. 可以将化学结构NMR图谱这样导入Word

    在化学各个领域中,大家常常会用到ChemDraw化学绘图软件来绘制各种图形,ChemDraw因其出色的功能在全球范围内深受欢迎,但是一些用户朋友对于一些功能还不是很了解,需要通过一些教程来了解如何操作 ...

  4. webpack添加node_path不是（'webpack' 不是内部或外部命令，也不是可运行的程序或批处理文件？）

    安装webpack 先决条件 开始之前,请确保安装了新的Node.js版本.目前的LTS是理想的起点.您可能会遇到与旧版本的各种问题,因为它们可能缺少webpack或相关软件包可能需要的功能. 请注意 ...

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

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

  6. python学习【第七篇】python文件操作

    一.文件操作过程 1. 打开文件,得到文件句柄并赋值给一个变量2. 通过句柄对文件进行操作3. 关闭文件 # 1.打开文件,得到文件句柄 f_handle = open('aa.txt', 'r', ...

  7. poj2528

    Mayor's posters Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 56864   Accepted: 16445 ...

  8. 《从零开始学Swift》学习笔记（Day 21）——函数返回值

    原创文章,欢迎转载.转载请注明:关东升的博客 返回值3种形式:无返回值.单一返回值和多返回值. 无返回值函数 所谓无返回结果,事实上是Void类型,即表示没有数据的类型. 无返回值函数的语法格式有如下 ...

  9. 【Python之路】第十五篇--Web框架

    Web框架本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客户端. #!/usr/bin/env python #coding:utf- ...

  10. js split 的用法和定义 js split分割字符串成数组的实例代码

    关于js split的用法,我们经常用来将字符串分割为数组方便后续操作,今天写一段广告判断代码的时候,竟然忘了split的用法了,特整理下,方便需要的朋友, 关于js split的用法其它也不多说什么 ...