css中如何用图片做导航

今天要为大家介绍一下在CSS中如何用图片做导航。
首先，在HTML中定义导航的链接，在每个链接中添加一个图片标签，例如：

<a href="home.html"><img src="home.png"></a>
<a href="about.html"><img src="about.png"></a>
<a href="contact.html"><img src="contact.png"></a> 

接下来，我们使用CSS来控制导航链接的样式，我们要设置链接为块级元素（display:block）以达到覆盖整个导航的效果，同时也可以调整宽高等属性。例如：

nav a {
  display: block;
  width: 50px;
  height: 50px;
} 

然后，我们为每个链接设置不同的背景图片，例如：

nav a[href="home.html"] {
  background-image: url("home.png");
}
nav a[href="about.html"] {
  background-image: url("about.png");
}
nav a[href="contact.html"] {
  background-image: url("contact.png");
} 

最后，我们还可以为链接添加悬停效果和活动状态，例如：

nav a:hover {
  opacity: 0.8;
}
nav a.active {
  opacity: 1;
} 

这样，我们就可以用图片制作出漂亮的导航啦！
总的代码如下：

nav a {
  display: block;
  width: 50px;
  height: 50px;
}
nav a[href="home.html"] {
  background-image: url("home.png");
}
nav a[href="about.html"] {
  background-image: url("about.png");
}
nav a[href="contact.html"] {
  background-image: url("contact.png");
}
nav a:hover {
  opacity: 0.8;
}
nav a.active {
  opacity: 1;
} 

感谢大家阅读，希望这篇文章对你有所帮助！