如何在导航栏上设置背景图像？

Question

我正试图制作一个带有背景图片的导航栏，其中包括 ul 和 li 作为链接，但没有成功。

我没有路径错误，因为我有其他正确渲染的 img 元素。HTML 部分只是导航区域内的 ul 和 li 元素。

CSS：

#main_menu {background-image:url(resources/images/navbar.png);height:40px;}

我已经搜索了网络上的解决方案，但没有找到可行的方法。我已经尝试了位置、大小和重复等方法。

编辑：我已经将

和
• 菜单设置为内联，以适应40像素的高度。

- Christian

Answer 1

您在图像路径末尾缺少闭合括号，应该是：

#main_menu {background-image:url(resources/images/navbar.png);height:40px;}

您可能还想在背景样式中设置background-repeat和background-position属性...

编辑 您的列表项是否被漂浮了？如果是，它们需要被清除或者容器会崩溃，这会导致背景图像无法显示。

- danwellman

---

我包含了一个闭合括号（笔误），并且我还搞乱了repeat和background-image-size。位置也没有帮助，抱歉。 - Christian

Answer 2

你需要从定义背景图片的规则中删除 height。

所以像这样：

#main_menu {background-image:url(resources/images/navbar.png); height:40px;}

现在你把它与文件路径混在一起了，因为缺少一个括号导致它没有关闭。

- Jason Gennaro