按钮制作技巧（css精灵效果）-高级版

 

[转自己以前的文章]

 

无论用什么语言，大家敲程序的时候多多少少都会遇到做按钮的时候。今天分享一个之前学做按钮的技巧，有人叫做css精灵效果。

 

 

 

通常做按钮的思路都用附图中的第一种：两张图片交互的形式，让人看上去有按钮的感觉。但是第一种方式会有弊端，如果图片在服务器上，我们要想成功点击某个“按钮”，那么我们作为客户端必须要向服务器发送两次请求，下载好这两个图片，才能成功点击出现按钮的效果。

 

 

 

我们用第二种方式来看一下，用制图软件（如ps），把两个按钮图片合成上下排版的一张图片，给按钮上半个图片的高，然后再用户点击的时候，让这张图片的高度进行负的半个高度像素 （-??px） 显示，只向服务器发送一次图片请求即可呈现按钮效果。