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. nginx的URL重写应用实例
			
    1,NGINx的URL重写 NGINX 的URL重写模块用的比较多,主要使用的命令有if rewrite set break 2 if命令 语法如下"" 语法:if(conditi ...
    
			
    2. 
						
  2. pptpd
			
    18. pptp Server Administration This section covers a few tricks on pptp server management. It is far ...
    
			
    3. 
						
  3. SDWebImage使用及原理
			
    第一步,下载SDWebImage,导入工程.github托管地址https://github.com/rs/SDWebImage 第二步,在需要的地方导入头文件 1 #import "UII ...
    
			
    4. 
						
  4. Nginx反向代理tomcat，seesion会话保持。
			
    proxy_pass http://10.0.0.10:8081/monitor/; proxy_cookie_path /monitor/ /; proxy_set_header Host &quo ...
    
			
    5. 
						
  5. Java编程思想重点笔记（Java开发必看）
			
    Java编程思想重点笔记(Java开发必看)   Java编程思想,Java学习必读经典,不管是初学者还是大牛都值得一读,这里总结书中的重点知识,这些知识不仅经常出现在各大知名公司的笔试面试过程中,而 ...
    
			
    6. 
						
  6. BerkeleyDB库简介
			
    BerkeleyDB库简介 BerkeleyDB(简称为BDB)是一种以key-value为结构的嵌入式数据库引擎: 嵌入式:bdb提供了一系列应用程序接口(API),调用这些接口很简单,应用程序和b ...
    
			
    7. 
						
  7. 即时搜索或input实时检测监听输入框变化
			
    js实现的文本框内容发生改变立马触发事件简单介绍:本章节介绍一下如何在文本框的内容发生变化的时候,立马触发一个事件执行响应的操作,而不是像是keydow或者keyup事件一样,只能够检测通过键盘输入导 ...
    
			
    8. 
						
  8. iOS开发网络篇—数据缓存
			
      iOS开发网络篇—数据缓存 一.关于同一个URL的多次请求 有时候,对同一个URL请求多次,返回的数据可能都是一样的,比如服务器上的某张图片,无论下载多少次,返回的数据都是一样的. 上面的情况会造 ...
    
			
    9. 
						
  9. [Nhibernate]一级缓存
			
    目录 写在前面 文档与系列文章 一级缓存 一个例子 一级缓存管理 总结 写在前面 上篇文章介绍了nhibernate中对象的三种状态,通过对象的三种状态,很容易想到缓存. 什麽是缓存? 有时候,某些数 ...
    
			
    10. 
						
  10. 2015.4.20  Canvas Jquery 移动端 JavaScript
			
    1.分享效果:弹窗Canvas渲染大图.   2.进度条中表现进度百分比的数值d%,根据进度的增长“字体颜色”为了表示清晰也随着变化 解决方法:参考Demo.   3.输入框保持查询参数,结果列表局部 ...
    
			
    11.