Html 在我的导航中的每个li上方添加图像

如何在导航中的文本上方添加图像。它应该显示在文本上方

我的HTML

<ul class="nav">
  <li class="whoweare"><a href="#">who we are</a></li>
  <li class="services"><a href="#">services</a></li>
  <li class="contact"><a href="#">contact</a></li>
</ul> 

<ul class="nav">
  <li class="whoweare"><img src="http://lorempixel.com/150/50/sports/9/"><a href="#">who we are</a></li>
  <li class="services"><img src="http://lorempixel.com/150/50/sports/4/"><a href="#">services</a></li>
  <li class="contact"><img src="http://lorempixel.com/150/50/sports/1/"><a href="#">contact</a></li>
</ul> 

看到这把小提琴了吗

如果您需要图像可点击，只需将其放入

图像需要
显示：block

HTML

<ul class="nav">
  <li class="whoweare"><a href="#">who we are</a></li>
  <li class="services"><a href="#">services</a></li>
  <li class="contact"><a href="#">contact</a></li>
</ul> 

<ul class="nav">
  <li class="whoweare"><img src="http://lorempixel.com/150/50/sports/9/"><a href="#">who we are</a></li>
  <li class="services"><img src="http://lorempixel.com/150/50/sports/4/"><a href="#">services</a></li>
  <li class="contact"><img src="http://lorempixel.com/150/50/sports/1/"><a href="#">contact</a></li>
</ul> 

您还可以使用背景图像将图像添加到链接：url（'paper.gif'）；nad设置文本缩进：-9999px

.whoweare{
      background-image:url('image_path');
      text-indent:-9999px;
     }
 .services{
       background-image:url('image_path');
      text-indent:-9999px;
     }
 .contact{
      background-image:url('image_path');
      text-indent:-9999px;
     }

“上面”是什么意思？浮动在文本上，使图像覆盖文本？垂直于文本上方，因此图像在屏幕上的显示高度高于文本？我的图像仍在向其侧面滑动。我的图像是否必须具有一定的大小？我的图像大小约为40x40 pxno。。显示：block将把它后面的内容放在一个新的行中。。（看我提供的小提琴）。如果你有问题，请做一把小提琴，这样我们就可以看到。我的图像块img显示在文本前面下面是我的代码完全相同：ul.nav{list style:none；border top:20px solid#FFF；}ul.nav li{float:left；text align:center；width:23%；}ul nav li img{display:block；}