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. Photoshop脚本之创建文件夹

    function checkFolder(path){ var folder = Folder(path) if(!folder.exists) folder.create() }

  2. DBCP与C3P0数据库连接池

    数据库连接池是做什么的? 学过计算机网络的都知道,在一个内部局域网中.大部分用的都是私有地址,要想和外部 打交道,必须要有相应的合法外部地址相相应.然而内部用户数量巨大.一台机子一个外部IP 是不现实 ...

  3. 【转】火狐右键google搜索特别慢的解决办法

    原网页:http://www.fatalist.im/blog/459.html google将谷歌中文网站google.cn的搜索服务转向到google.com.hk(香港)后,firefox右上角 ...

  4. 第四篇：了解 C++ 默默编写并调用的函数

    前言 对于一个类来说,最最基础的三类成员函数莫过于:构造函数,析构函数以及拷贝函数 (copy构造函数和=重载函数).即使你的类没有为这些函数做出定义,C++ 也会自动为你创建.本文将讲述的是 C++ ...

  5. HDU4771(2013 Asia Hangzhou Regional Contest )

    http://acm.hdu.edu.cn/showproblem.php?pid=4771 题目大意: 给你一幅图(N*M)“@”是起点,"#"是墙,“.”是路,然后图上有K个珠 ...

  6. of 循环 改变 对象值 对const的理解 对象的字面量 计算属性

    const arr = [{a:23,b:34},{a:123,b:134}]console.log(arr)for (let v of arr){console.log(v)const old = ...

  7. 查找杀死指定进程delphi

    //需要引用tlhelp32单元//查找进程function findProcessId(pname:string):Cardinal; var hsnapshot:THandle; lpe:TPro ...

  8. Git中如何将代码恢复到之前某个节点

    本文主要讲如何使用小乌龟软件将代码恢复到之前某个节点. 一 说明 在实际项目开发中,都是很多人一起联合开发,往往会遇到这种情况:马上要发版本了,突然发现一个致命BUG,而这个BUG是由于某个小伙伴修改 ...

  9. 数字雨（Javascript使用canvas绘制Matrix，效果很赞哦）

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. js四则运算符

    只有当加法运算时,其中一方是字符串类型,就会把另一个也转为字符串类型.其他运算只要其中一方是数字,那么另一方就转为数字.并且加法运算会触发三种类型转换:将值转换为原始值,转换为数字,转换为字符串. & ...