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. mysql select
			
    select 查询: 赋值:赋值不能应用在where中,因为where操作的是磁盘上的文件,可以应用在having筛选中. 例:select (market_price-shop_price) as  ...
    
			
    2. 
						
  2. 教你一招：EXCEL单元格随机生成字母
			
    =CHAR(RANDBETWEEN(1,4)+65) 65代表大写字母A,依次类推 1代表从A开始 4代表到D结束
    
			
    3. 
						
  3. Ruby升级的最新方法
			
    今天安装cocoapods时候出现了下面的提示Error installing pods:active support requires Ruby version >= 2.2.0这个需求的意思 ...
    
			
    4. 
						
  4. Jquery 关于span标签的取值赋值用法
			
    span是最简单的容器,可以当作一个形式标签,其取值赋值方法有别于一般的页面元素. //赋值 $("#spanid").html(value) //取值 $("#span ...
    
			
    5. 
						
  5. git Bash常用命令
			
    1.Construct ssh key (If you want to commit to git server via THIS COMPUTER) git config --global user ...
    
			
    6. 
						
  6. pair correlation ggpair ggmatrix
			
    https://zhuanlan.zhihu.com/p/23400450 首发于 R语言数据分析与可视化 关注专栏 登录 写文章     R 语言矩阵散点图 EasyCharts· 15 天前 散点 ...
    
			
    7. 
						
  7. python3随记——字符编码
			
    1.1什么是字节 字节(Byte)是计算机信息技术用于计量存储容量的一种计量单位,也表示一些计算机编程语言中的数据类型和语言字符. 比特(bit)在计算机中最小的单位,在二进制位的电脑的系统中,每一b ...
    
			
    8. 
						
  8. JointBoost+CRF+GraphCut做手绘草图的分割
			
    研究生做的稍微有点水平的就这两个项目了:一个是利用SVM做手绘草图的分类,另一个是利用JointBoost+CRF做手绘草图的分割.总结得出的经验是做研究的方法就是将别人大神的代码看懂然后改成适合自己 ...
    
			
    9. 
						
  9. SDL鼠标事件
			
    鼠标事件有这么多种,手柄的可以忽视,Sdl.SDL_KEYDOWN,Sdl.SDL_KEYUP,Sdl.SDL_MOUSEMOTION,Sdl.SDL_MOUSEBUTTONDOWN,Sdl.SDL_ ...
    
			
    10. 
						
  10. [Unity3D]导入模型并且设置相应的属性
			
    将资源拷贝到Assets中并设置 首先确保法线贴图的属性如下: 设置基本贴图和法线贴图 因为要发布到移动端,设置shader属性: 为了设置更好的反光效果,添加cubemap: 添加新的Materia ...
    
			
    11.