1. #btn:hover {background-position: [pixels shifted rightright]px [pixels shifted down]px;}  

CSS雪碧的基本原理是把你的網站上用到的一些圖片整合到一張單獨的圖片中，從而減少你的網站的HTTP請求數量。該圖片使用CSS background和background-position屬性渲染(值得一提的是，這也就意味著你的標簽變得更加復雜了，圖片是在CSS中定義，而非<img>標簽)。

使用css-sprite雪碧圖工具
可能是最好用的雪碧圖工具了，好吧，至少是我用過最好用的。

首先安裝css-sprite，安裝這里很坑，等我最后再說。

復制代碼代碼如下:npm install css-sprite
我是使用gulp來構建前端代碼，所以還需要安裝gulp和gulp-if,安裝好之后就可以開始配置啦。
新建一個task:

全選復制放進筆記var gulp = require('gulp');

JavaScript Code復制內容到剪貼板