1、首先引入2张图片素材，请大家下载使用，如下：
2、首先写一个div元素，在里面放几个a标签，用来做导航元素，代码如下：
<div class="nav">
<a href="#">首页</a>
<a href="#">新闻中心</a>
<a href="#">合作用户</a>
<a href="#">人才计划</a>
</div>
效果图如下：
3、给a元素设置宽高，与图片的宽高保持一致，行高设置成与高度一样，使文字垂直居中，text-align:center使文字水平居中，并设置背景图片，代码如下：
.nav a{
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
background-image: url(../img/bg.png);
color: #fff;
text-decoration: none;
}
效果图如下：
4、添加鼠标经过效果，当鼠标停留在a标签上，把背景图片使用另外一张图片替换，这样就实现了切换效果，代码如下：
.nav a:hover {
background-image: url(../img/bgc.png);
}
效果图如下：
5、最后，提供给大家全部源代码，如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.nav a{
width: 120px;
height: 50px;
line-height: 50px;
text-align: center;
display: inline-block;
background-image: url(../img/bg.png);
color: #fff;
text-decoration: none;
}
.nav a:hover {
background-image: url(../img/bgc.png);
}
</style>
</head>
<body>
<div>
<a href="#">首页</a>
<a href="#">新闻中心</a>
<a href="#">合作用户</a>
<a href="#">人才计划</a>
</div>
</body>
</html>
