个人使用支付宝相对比较频繁，但实话说，我连支付宝的域名都不记得，也不拿支付宝交水电费（也不支持昆明）。一直都是在淘宝选购好商品，跳转到支付页面个人中心，付钱。存钱直接存卡通完事。只有很好的机会看到支付宝首页。

近期看一些css sprites东西，见到网页便拖着firbug看看。发现支付宝首页几乎所有元素都囊括进一张png图片。

而这张png图片仅仅为17.39KB，根本无需考虑网页载入速度，有效减少了HTTP请求次数。

css sprites利用background-image组合background-repeat, background-position调整background-position数值达到在不同位置显示不同图片，不需要用background-image重复调用图片url。

关键的background-postiion要玩的好，做整张png时安排的合理，拿尺子量的准确。点击这里具体看属性

background-position: x% y%

x%指水平偏移，y%指垂直偏移，左上角是：0%,0%，右下角是：100%,100%，默认50%

在支付宝代码中到处都是这样的代码：

精细到1px，不知道具体操作时候会是什么情况。到现在还没有具体操作过这类的css sprites，正个悬停操作起那些px都头疼，还好据说支付宝前端也招了不少人。这个页面效果比老版页面帅气多了。