CSS Sprites原理：
　　CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。
CSS Sprites优缺点：

　　优点

　　　　1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这也是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；
　　　　2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。
　　　　3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了，不需要对每一个小元素进行命名，从而提高了网页的制作效率。
　　　　4.更换风格方便，只需要在一张或少张图片上修改图片的颜色或样式，整个网页的风格就可以改变。维护起来更加方便。

　　缺点

　　　　诚然CSS Sprites是如此的强大，但是也存在一些不可忽视的缺点，如下：
　　　　　　1.在图片合并的时候，你要把多张图片有序的合理的合并成一张图片，还要留好足够的空间，防止板块内出现不必要的背景；这些还好，最痛苦的是在宽屏，高分辨率的屏幕下的自适应页面，你的图片如果不够宽，很容易出现背景断裂；
　　　　　　2.CSS Sprites在开发的时候比较麻烦，你要通过pohtoshop或其他工具测量计算每一个背景单元的精确位置，这是针线活，没什么难度，但是很繁琐；幸好腾讯的鬼哥用ADOBE AIR开发了一个CSS Sprites 样式生成工具，虽然还有一些使用上的不灵活，但是已经比photoshop测量来的方便多了，而且样式直接生成，复制，拷贝就OK！
　　　　　　3.CSS Sprites在维护的时候比较麻烦，如果页面背景有少许改动，一般就要改这张合并的图片，无需改的地方最好不要动，这样避免改动更多的css，如果在原来的地方放不下，又只能（最好）往下加图片，这样图片的字节就增加了，还要改动css。
　　　　　　4.CSS Sprites非常值得学习和应用，特别是页面有一堆icon（图标）。总之很多时候大家要权衡一下利弊，再决定是不是应用CSS Sprites。

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport"

          content="width=device-width,initial-scale=1,minimum-scale=1, maximum-scale=1,minimal-ui, user-scalable=no"/>

    <style>

        .sprites div {

            margin: 5px;

        }

        .sprites span {

            float: left;

            width: 20px;

            height: 20px;

            background-image: url(sprite.png);

            background-size: 60px 40px;

        }

        .sprites1{

            background-position: 0 0;

        }

        .sprites2{

            background-position: -20px 0;

        }

        .sprites3{

            background-position: 0 -20px;

        }

        .sprites4{

            background-position: -20px -20px;

        }

        .sprites5{

            background-position: -40px 0;

        }

        .sprites6{

            background-position: -40px -20px;

        }

    </style>

</head>

<body>

<div class="sprites">

    <div><span class="sprites1"></span>付款图标</div>

    <div><span class="sprites2"></span>删除图标</div>

    <div><span class="sprites3"></span>存款图标</div>

    <div><span class="sprites4"></span>粘贴图标</div>

    <div><span class="sprites5"></span>笑脸图标</div>

    <div><span class="sprites6"></span>编辑图标</div>

</div>

</body>

</html>


												


											
Css Sprites 多张图片整合在一张图片上的更多相关文章
	

    
								
  1. CSS sprites(css 精灵):将小图标整合到一张图片上
		
    一.什么是css sprites css sprites直译过来就是CSS精灵.通常被解释为“CSS图像拼合”或“CSS贴图定位”.其实就是通过将多个图片融合到一张图里面,然后通过CSS backgr ...
    
		
    2. 
						
  2. 7：CSS Sprites的原理（图片整合技术）
		
    7:CSS Sprites的原理(图片整合技术) 一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-position”来实现背景图片的定 ...
    
		
    3. 
						
  3. CSS Sprites的原理（图片整合技术）(CSS精灵)/雪碧图
		
    CSS Sprites的原理(图片整合技术)(CSS精灵)/雪碧图   一.将导航背景图片,按钮背景图片等有规则的合并成一张背景图,即将多张图片合为一张整图,然后用background-positio ...
    
		
    4. 
						
  4. CSS Sprites+CSS3 Icon Font
		
    CSS Sprites+CSS3 Icon Font CSS Sprites在国内很多人叫CSS精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来, ...
    
		
    5. 
						
  5. 【转】CSS Sprites教程大全（使用方法、工具介绍）
		
    什么是CSS Sprite CSS Sprite 又叫CSS精灵,是目前大型网站中经常运用的图片处理方式.它的原理很简单,将网站上零散的小图片(或图标)整合在一张大图上,再用CSS中“backgrou ...
    
		
    6. 
						
  6. css sprites介绍
		
    一.CSS Sprites简介 通常被意译为“CSS图像拼合”或“CSS贴图定位”.CSS Sprites并不是一门新技术,目前它已经在网页开发中发展得较为成熟,CSS Sprites并不是什么金科玉 ...
    
		
    7. 
						
  7. 【CSS sprites （CSS图片精灵） 详解】
		
    本文包含 CSS sprites 简介.原理.适用在哪些类型的网页制作中.背景图片的 position 值如何确定以及制作 sprites 的技巧. [CSS sprites 简介] CSS Spri ...
    
		
    8. 
						
  8. CSS Sprites  (css精灵)
		
    CSS Sprites CSS Sprites在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就不 ...
    
		
    9. 
						
  9. 前端性能优化--图片处理（Css Sprites 与 base64）
		
    前言: 近期研究着前端性能的优化方面的知识,并以博客记之.之前有相同系列的文章(前端性能优化--图片懒加载(lazyload image)),这次继续是关于图片的处理,css sprites 和 ba ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 1201MySQL配置文件mysql.ini参数详解
			
    转自http://www.cnblogs.com/feichexia/archive/2012/11/27/mysqlconf.html my.ini(Linux系统下是my.cnf),当mysql服 ...
    
			
    2. 
						
  2. string.IsNullOrEmpty和string.IsNullOrWhiteSpace方法的区别
			
    string.IsNullOrEmpty 都知道,这个功能是判断字符串是否为:null或者string.Empty.如果是如"\t"这样的字符就返回false了,为了达到判断过滤这 ...
    
			
    3. 
						
  3. 自己写一个JS单向数据流动库----one way binding
			
    JS单向流动其实就是数据到视图的过程, 这几天突发奇想,想着弄一个插件, 把DOM结构使用JS进行描述: 因为DOM中的Class , content, id, attribute, 事件, 子元素全 ...
    
			
    4. 
						
  4. Linux操作系统中，*.zip、*.tar、*.tar.gz、*.tar.bz2、*.tar.xz、*.jar、*.7z等格式的压缩与解压
			
    zip格式 压缩: zip -r [目标文件名].zip [原文件/目录名] 解压: unzip [原文件名].zip 注:-r参数代表递归 tar格式(该格式仅仅打包,不压缩) 打包:tar -cv ...
    
			
    5. 
						
  5. 【Codeforces715C&716E】Digit Tree       数学 + 点分治
			
    C. Digit Tree time limit per test:3 seconds memory limit per test:256 megabytes input:standard input ...
    
			
    6. 
						
  6. Hbase集群master.HMasterCommandLine: Master exiting
			
    2016-12-15 17:01:57,473 INFO [main] impl.MetricsSystemImpl: HBase metrics system started 2016-12-15  ...
    
			
    7. 
						
  7. django创建blog
			
    如果本文看不懂的,去看的我视频吧!http://www.testpub.cn/ ------------------------------------------- Django 自称是" ...
    
			
    8. 
						
  8. 【Beta】Daily Scrum
			
    队名:Clover 解宇虹 031402338 林 锦 031402339 李坤隆 031402612 李烈争 031402614 林昊斌 031402615 林瑞斌 031402617 github ...
    
			
    9. 
						
  9. <!DOCTYPE html>作用
			
    1.定义: DOCTYPE标签是一种标准通用标记语言的文档类型声明,它的目的是要告诉标准通用标记语言解析器,它应该使用什么样的文档类型定义(DTD)来解析文档. <!DOCTYPE> 声明 ...
    
			
    10. 
						
  10. 迭代器学习之一：使用IEnumerable和IEnumerator接口
			
    写博客是检验我学习的成果之一以及自我总结的一种方式,以后会经常利用这种方式进行技术交流和自我总结,其中认识不深难免会有错误,但是一直懂得不懂就问,不懂就学的道理! 1.首先看一个简单的列子 , , , ...
    
			
    11.