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. iOS开发知识点总结
			
    main文件做了这几件事: 1. 创建当前的应用程序 2. 根据4个参数的最后为应用程序设置代理类(默认情况下是AppDelegate) 3. 将appDelegate 和 应用程序 建立关联(指定代 ...
    
			
    2. 
						
  2. spring-初始化完成后运行指定内容
			
    方案1:继承ApplicationListener public class InstantiationTracingBeanPostProcessor implements ApplicationL ...
    
			
    3. 
						
  3. HTML5学习总结-番外05 响应式布局
			
    1. 响应式布局 响应式布局是2015年5月份提出的一个概念,简而言之,就是一个网站能够兼容多个终端,而不是为每个终端做一个特定的版本.这个概念是为解决移动互联网浏览而诞生的.其目的是为用户提欧共更加 ...
    
			
    4. 
						
  4. 30个要点帮你完成java代码优化
			
    通过java代码规范来优化程序,优化内存使用情况,防止内存泄露 可供程序利用的资源(内存.CPU时间.网络带宽等)是有限的,优化的目的就是让程序用尽可能少的资源完成预定的任务.优化通常包含两方面的内容 ...
    
			
    5. 
						
  5. Twemproxy 缓存代理服务器
			
    Twemproxy 缓存代理服务器 Twemproxy 概述 Twemproxy(又称为nutcracker)是一个轻量级的Redis和Memcached代理,主要用来减少对后端缓存服务器的连接数.T ...
    
			
    6. 
						
  6. IntersectionObserver API
			
    温馨提示:本文目前仅适用于在 Chrome 51 及以上中浏览. 2016.11.1 追加,Firefox 52 也已经实现. 2016.11.29 追加,Firefox 的人担心目前规范不够稳定,未 ...
    
			
    7. 
						
  7. linux 根据文件大小查找文件
			
    inux下的find命令用来查找文件,通过man find就知道它是无所不能的.所以按照文件大小来查找文件就不在话下.从man find搜索size,可以看到如下信息: -size n[cwbkMG] ...
    
			
    8. 
						
  8. vijos1531 食物链
			
    背景 安徽省芜湖市第二十七中学测试题 NOI 2001 食物链(eat) Description:OfficialData:OfficialProgram:JackDavid127 描述 动物王国中有 ...
    
			
    9. 
						
  9. java中的等于
			
    数字的比较等于用“==” 不等于用“!=” 字符的比较等于用“.equals”不等于用”!s1.equals(s2)“
    
			
    10. 
						
  10. 2014 Multi-University Training Contest 9#11
			
    2014 Multi-University Training Contest 9#11 Killing MonstersTime Limit: 2000/1000 MS (Java/Others)   ...
    
			
    11.