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. 篇二：JS身份证校验
			
    身份证校验 function identityCodeValid(code) { var city={11:"北京",12:"天津",13:"河北&q ...
    
			
    2. 
						
  2. Css 知识点（不要删）
			
    测试:火狐浏览器,谷歌浏览器,ie 6~9就足够了,现代浏览器从ie10及 以后兼容性好(适合html5) 1.结构用id,内容用class:fr\fl 用于结构上:能用margin-right就不要 ...
    
			
    3. 
						
  3. 前端模块化工具-webpack
			
    详解前端模块化工具-webpack webpack是一个module bundler,抛开博大精深的汉字问题,我们暂且管他叫'模块管理工具'.随着js能做的事情越来越多,浏览器.服务器,js似乎无处不 ...
    
			
    4. 
						
  4. oracle---触发器总结
			
    一.触发器简介 触发器的定义就是说某个条件成立的时候,触发器里面所定义的语句就会被自动的执行.因此触发器不需要人为的去调用,也不能调用.然后,触发器的触发条件其实在你定义的时候就已经设定好了.这里面需 ...
    
			
    5. 
						
  5. php实现转换html格式为文本格式的方法
			
    有时候需要转换html格式的字符串为文本,但又需要保持一定的格式,比如要求段落变成的分段格式就可以用下面这个函数 function html2text($str){  $str = preg_repl ...
    
			
    6. 
						
  6. JQ001-认识jQuery  和  JQ002-jQuery选择器
			
    JQ001-认识jQuery jQuery环境配置:将jQuery.js文件引入到html页面中即可. 代码如下: <!DOCTYPE html> <html> <hea ...
    
			
    7. 
						
  7. Debian 8中dpkg -i自动解决依赖关系
			
    dpkg -i 后#apt-get update &&apt-get -f install
    
			
    8. 
						
  8. 试图加载格式不正确的程序。 (异常来自HRESULT:0x8007000B)
			
    异常来自HRESULT:0x8007000B   缘由:在64位操作系统下IIS发布32位的项目,报“项目依赖的dll无法读取,试图加载格式不正确的程序”错误. 原因:程序集之间的通讯要么全是64位环 ...
    
			
    9. 
						
  9. CF memsql Start[c]UP 2.0 B
			
    CF memsql Start[c]UP 2.0 B B. Distributed Join time limit per test 1 second memory limit per test 25 ...
    
			
    10. 
						
  10. 【Go入门教程3】流程（if、goto、for、switch）和函数（多个返回值、变参、传值与传指针、defer、函数作为值/类型、Panic和Recover、main函数和init函数、import）
			
    这小节我们要介绍Go里面的流程控制以及函数操作. 流程控制 流程控制在编程语言中是最伟大的发明了,因为有了它,你可以通过很简单的流程描述来表达很复杂的逻辑.Go中流程控制分三大类:条件判断,循环控制和 ...
    
			
    11.