精灵图（雪碧图）做一个按钮不同转态的颜色变化案例
1.一下是不同转态的按钮
2.我们需要用PxCook工具测量一下，分析出来，图片的定位
默认位置 其实左边0，0 ；中间hovue状态坐标 92px 0 ,激活坐标186px 0;
3.展示程序
<!-- html5 声明 必须要用 -->
<!DOCTYPE html>
<html lang="ch">
<head>
<!-- 网页编码 -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="keywords" content="德龙科技,智能照明,施耐德knx,物联网4G">
<meta name="description" content="掘金是一个帮助开发者成长的社区,是给开发者用的 Hacker News,给设计师用的 Designer News,和给产品经理用的 Medium。掘金的技术文章由稀土上聚集的技术大牛和极客共同编辑为你筛选出最优质的干货,其中包括：Android、iOS、前端、后端等方面的内容。用户每天都可以在这里找到技术世界的头条内容。与此同时,掘金内还有沸点、掘金翻译计划、线下活动、专栏文章等内容。即使你是 GitHub、StackOverflow、开源中国的用户,我们相信你也可以在这里有所收获。">
<style>
</style>
<title>精灵图</title>
<style>
a {
display: inline-block;
height: 36px;
width: 92px;
background: url(btn.png) no-repeat ;
}
/*悬停转态 水平向右移动 为负值 92 */
a:hover{
background-position: -92px 0;
}
/* 激活转态 水平向右移动 为负值 */
a:active{
background-position: -186px 0;
}
</style>
</head>
<body>
<a href="#"></a>
</body>
</html>
