如何制作带背景图片的导航

1、1.在浏览网页的时候，我们经常会看到网页导航有个默认的效果，当你鼠标划过导航的时候，会有另外一个效果，当你点击选中某个栏目的时候，又会是另外一个效果，类似如下图：

2、2.首咸犴孜稍先准备4张图片,分别代表默认样式，鼠标移动到菜单上的样式，和菜单被选中的样式，最后一张是为了下边的cssscript准备的

3、3.在编辑器中输入如下代码

4、4.预览效果如下

5、5.现在给a标签添加默认的背景图片

6、6.预览后，发现现在背景全部是白色图片了

7、7.给a:hover添加淡黄的背景图片

8、8.预览效果，当鼠标滑动到菜单上的时候，会出现淡黄背景图片

9、9.我们还少一个当菜单被选中时的效果，看如下代码

10、10.预览效果如下：

11、11.上边是分别引用了3张图片，而还有一种cssscript技术，即引用一张图片，通过定位来确定引用图片中的哪一部分，如下图的代码，被框选的分别标识距离这张图片顶部和左侧的距离

12、12.他们的实现效果是一样的