使用文本和图像创建导航菜单

Question

请问您如何在底部创建像这样的导航菜单？ https://m1.behance.net/rendition/modules/30754283/disp/e05f3faf8755b4c1892a7e9c66de7627.png

我已经设置了页脚div，我只需要菜单本身。我尝试过并尝试过，但无法按照我的要求进行显示。图像必须具有CSS背景，以便在“标签”处于活动状态时可以更改图像。

非常感谢你！

Answer 1

我真的没有看到以background-image属性执行此操作所需的任何方式。

您可以在此导航栏的HTML结构中使用普通<img src="pics/my-img.png" />。将对齐设置为图像上的任何内容都将在大多数情况下将文本放在图片下方的同一容器中，但如果出现异常：

#myNavigation img {
   display: block;
   padding-bottom: 4px;
}

这可以帮助您了解我对您的问题的理解，您尝试使用图片和文字创建导航菜单。

对于这种情况，还有一个非常简单和漂亮的悬停效果可能性，例如：

#myNavigation img {
   opacity: 0.6;
}
#myNavigation img:hover {
   opacity: 1;
}

祝你好运！