css sprites直译过来就是CSS精灵，但是这种翻译显然是不够的，其实就是通过将多个图片融合到一副图里面，然后通过CSS的一些技术布局到网页上。这样做的好处也是显而易见的，因为图片多的话，会增加http的请求，无疑促使了网站性能的减低，特别是图片特别多的网站，如果能用css sprites降低图片数量，带来的将是速度的提升。
下面我们来用一个实例来理解css sprites。
我们仅仅只需要制作一个扑克牌，拿黑桃10为例子。
可以直接把蓝色理想中融合好的一幅大图作为背景，这也是css sprites的一个中心思想，就是把多个图片融进一个图里面。
这就是融合后的图，相信对PS熟悉的同学应该很容易的理解，通过PS我们就可以组合多个图为一个图。
现在我们书写html的结构：
<div class="card"> <div class="front"> <b class="N1 n10"></b> <em class="First small_up1"></em> <span class="A1 up1"></span> <span class="A2 up1"></span> <span class="A3 down1"></span> <span class="A4 down1"></span> <span class="B1 up1"></span> <span class="B2 down1"></span> <span class="C1 up1"></span> <span class="C2 up1"></span> <span class="C3 down1"></span> <span class="C4 down1"></span> <em class="Last small_down1"></em> <b class="N2 n10_h"></b> </div> </div>
在这里我们来分析强调几点:
一：card为这个黑桃十的盒子或者说快，对div了解的同学应该很清楚这点。
二：我用span,b,em三种标签分别代表三种不同类型的图片，span用来表标中间的图片，b用来表示数定，em用来表示数字下面的小图标。
三：class里面的声明有2种，一个用来定位黑桃10中间的图片的位置，一个用来定义方向（朝上，朝下）。
上面是DIV基本概念，这还不是重点，不过对DIV不太清楚的同学可以了解。
下面我们重点谈下定义CSS：
span{display:block;width:20px;height:21px; osition:absolute;background:url(images/card.gif) no-repeat;}
这个是对span容器的CSS定义，其他属性就不说了，主要谈下如何从这个里面来理解css sprites。
背景图片，大家看地址就是最开始我们融合的一张大图，那么如何将这个大图中的指定位置显示出来呢？因为我们知道我们做的是黑桃10，这个大图其他的图像我们是不需要的，这就用到了css中的overflow:hidden;
但大家就奇怪了span的CSS定义里面没有overflow:hidden啊，别急，我们已经在定义card的CSS里面设置了（这是CSS里面的继承关系）：
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
理解到这点还不够，还要知道width:125px;height:170px; 这个可以理解成是对这个背景图片的准确切割，当然其实并不是切割，而是把多余其他的部分给隐藏了，这就是overflow:hidden的妙用。
通过以上的部分的讲解，你一定可以充分的把握css sprites的运用，通过这个所谓的“切割”，然后再通过CSS的定位技术将这些图准确的分散到这个card里面去！
PS:CSS的定位技术，大家可以参考其他资料，例如相对定位和绝对定位，这里我们只能尝试用绝对定位。
最后我们来补充一点：
为什么要采取<span class="A1 up1"></span>这样的结构？
span这个容器是主要作用就是存放这张大的背景图片，并在里面实现”切割“，span里面切割后的背景是所有内容块里面通用的！
后面class为什么要声明2个属性？
很显然，一个是用来定位内容块的位置，一个是用来定义内容块中的图像的朝上和朝下，方位的！
下面我们附上黑桃10的完整源码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>制作一幅扑克牌--黑桃10</title>
<style type="text/css"><!--
.card{width:125px;height:170px; position:absolute;overflow:hidden;border:1px #c0c0c0 solid;}
/*中间图片通用设置*/
span{display:block;width:20px;height:21px; position:absolute;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;}
/*小图片通用设置*/
b{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat; overflow:hidden;}
/*数字通用设置*/
em{display:block;width:15px;height:10px; position:absolute;font-size:10pt;text-align:center;font-weight:bold;background:url(http://www.blueidea.com//articleimg/2009/02/6382/00.gif) no-repeat;overflow:hidden;}
/*各坐标点位置*/
.N1{left:1px;top:8px;}
.First{left:5px;top:20px;}
.A1{left:20px;top:20px;}
.A2{left:20px;top:57px;}
.A3{left:20px;top:94px;}
.A4{left:20px;top:131px;}
.B1{left:54px;top:38px;}
.B2{left:54px;top:117px;}
.C1{left:86px;top:20px;}
.C2{left:86px;top:57px;}
.C3{left:86px;top:94px;}
.C4{left:86px;top:131px;}
.Last{bottom:20px;right:0px;}
.N2{bottom:8px;right:5px;
}
/*大图标黑红梅方四种图片-上方向*/
.up1{background-position:0 1px;}/*黑桃*/
/*大图标黑红梅方四种图片-下方向*/
.down1{background-position:0 -19px;}/*黑桃*/
/*小图标黑红梅方四种图片-上方向*/
.small_up1{background-position:0 -40px;}/*黑桃*/
/*小图标黑红梅方四种图片-下方向*/
.small_down1{background-position:0 -51px;}/*黑桃*/
/*A~k数字图片-左上角*/
.n10{background-position:-191px 0px;left:-4px;width:21px;}
/*A~k数字图片-右下角*/
.n10_h{background-position:-191px -22px;right:3px;width:21px;}
/*A~k数字图片-左上角红色字*/
.n10_red{background-position:-191px 0px;}
/*A~k数字图片-右下角红色字*/
.n10_h_red{background-position:-191px -33px;}
-->
</style>
</head>
<body>
<!--10字符-->
<div class="card">
<div class="front">
<b class="N1 n10"></b>
<em class="First small_up1"></em>
<span class="A1 up1"></span>
<span class="A2 up1"></span>
<span class="A3 down1"></span>
<span class="A4 down1"></span>
<span class="B1 up1"></span>
<span class="B2 down1"></span>
<span class="C1 up1"></span>
<span class="C2 up1"></span>
<span class="C3 down1"></span>
<span class="C4 down1"></span>
<em class="Last small_down1"></em>
<b class="N2 n10_h"></b>
</div>
</div>
</body>
</html>
相关推荐
CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示 CSS Sprites实例演示CSS Sprites实例演示 CSS Sprites实例演示
CSS Sprites Generator v 0.1.5（测试版） 基于内嵌精灵定义和引用的微型CSS精灵生成器... 输出的问题应在clean-css。CSSSprites任务使用grunt cssSprites命令运行此任务。选项styleSrc 类型： string 描述：它用于获取
Scary-Monsters-and-Nice-Sprites-Skrillex五线谱钢琴谱.pdf
资源分类：Python库 所属语言：Python 资源全名：pygame_minesweeper_sprites-1.0.39-py3-none-any.whl 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
CSS Sprites生成工具
CSS Sprites Generator 雪碧图生成工具（官网：https://softpcapps.com/css-sprites-generator）
资源分类：Python库 所属语言：Python 资源全名：sprites-1.13.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
PHP-CSS-Sprites-Generator 简单的 CSS 精灵生成器 PHP 类。 从图片文件夹生成精灵。 此脚本循环遍历文件夹中的所有图片并将其放置在适合的位置。依赖关系api使用示例 $ spriteGrid = new yl\gfx\ SpriteGrid ();$ ...
资源分类：Python库 所属语言：Python 资源全名：sprites-1.465.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
CSS Satyr（CSS 塞特斯）是一款 CSS Sprites 的小工具。可以将多个小图片整合成一张图片，并生成相应的CSS调用代码。支持批量添加图片/拖动排列/自动生成
Knight vs Undead - Game Sprites - 恶灵军团卡通图集；
程序名称：CSS Sprites 样式生成工具(bg2css) 主要功能：方便使用CSS Sprites时对图片生成样式 安装条件：需先安装Adobe的AIR环境AdobeAIRInstaller.exe，这个我也传到csdn空间了，可以搜索下！
css sprites 、css精灵 、css整合小图片工具，可以把网站中的小图片整合成一张图片，减小服务请求次数
CSS Sprites适合新手学习，介绍了怎么将多张图片做成一张图片都，通过CSS来调用
资源分类：Python库 所属语言：Python 资源全名：pygame-minesweeper-sprites-1.0.39.tar.gz 资源来源：官方 安装方法：https://lanzao.blog.csdn.net/article/details/101784059
CSS Sprites技术bg2css_v3.2.1
CSS Sprites样式生成工具.zip
CSS Sprites在国内很多人叫css精灵，是一种网页图片应用处理方式。它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去，这样一来，当访问该页面时，载入的图片就不会像以前那样一幅一幅地慢慢显示出来了。
CSS Sprites 样式生成工具(bg2css) 3.2.1 （需要AIR环境，可到 Adobe站点 下载安装。）