如之前所学， css sprites可以减少http的请求次数。 今天遇到以下两种情况利用sprites解决

1. 在form里面的 input type = image 的时候的 sprites（referentce 1.http://blog.josh420.com/archives/2008/07/using-sprite-images-with-input-typeimage-for-hover-effect.aspx）

把<input type = image>的语句放入一个 div中 如下

<div id="submitButton">
  <input type="image" src="xxx.png"  />
</div>

css 如下
#submitButton {
  cursor:pointer;       /* Give it the hand cursor, like a link */
  height:40px;          /* Image has a height of 80px, only show the first half */
  overflow:hidden;      /* Hide the overflow */
  width:200px;          /* Width of the image */
}
#submitButton:hover input {
  margin-top:-40px;
/* Negative height of half the sprite, to push the image up */
}


2. 在图片链接做hover的效果

<a href='#' class="Button"></a>

css如下
a.wantButton{
    display:block;
    cursor:pointer;
    width:203px;
    height:52px;
    overflow:hidden;
    background:url(XXX.png)；
}

a.wantButton:hover {
    background-position:-204px 0;
}
n250