css+div制作一幅扑克牌系列教程(图)

　　在google中搜索一下csssprites这个名称，会查出很多信息，并且随着seo越来越被人们重视，采用这种技术来进行图片优化的网站越来越多，国内几家大型门户网站无不仿效。如新浪，网易，搜狐。你下载一下他们的网站上的图片，你会看到他们将很多小图片全部集成在一张图片上。

　　这样做的好处是不言而语：

　　1.加速图片显示

　　2.利用css技巧减小http请求

　　3.利于网站优化seo

　　其实原理非常简单，主要是应用css中的背景定位技术来实现的。主要就是用一个属性background-position来控制显示一张大图片中的一个指定大小的图片位置。

　　下面从一个比较有趣的例子来一步步动手制作一幅扑克牌，看看是如何定位图片的。

　　首先我们分析一下扑克牌，一幅扑克牌有两种颜色，有四种图案黑桃、红心、梅花、方块。另外有j，q，k，这三种是花牌。a~10中只用到四种图案，而三种花牌用到三张图片，而它们的位置是不同的，但归纳起来就只有几种变化，如a-7这是一种变化，它是三行三列的布局（a和2是它的特例），8-10就一种，它是四行三列。j，q，k是一种（其实它也是第一种的变种特例）。

　　知道了原理就好办了，我们先做出它们的图片来，一张一张来，黑桃、红心、梅花、方块大图各一张，小图各一张，j，q，k图案各一张，背景图一张。

　　另外要做全部的数字图片13张，270度翻转的图片13张。

　　好了，所有的图片准备齐了，共有71张图片，嘿嘿，有点吓人，这么多图片，没想到吧（以后会介绍一个比较省事的做法，不用图片，先卖个关子，有点）

　　我们以黑桃10为例看看其中的坐标点，下图是在ps中用辅助线做好的效果：

　　图1

　　要注意的是每一张牌下部分的内容与上部分是垂直翻转的，这也是为什么将数字也做成图片的原因。

　　所以我们可以将所有的图片在ps中排列组合在一起，如图2所示：