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

Question

我正在尝试制作带有背景图片的导航栏，包括ul和li作为链接，但无法成功。

我没有路径错误，因为我有其他img元素可以正确呈现。 html部分只是导航区域内的ul和li元素。

的CSS：

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

我在网上搜索了解决方案，但我没有发现任何有效的方法。我尝试了位置，大小和重复。

修改：我已将ul和li菜单设为内嵌，因此它们适合40px的高度。

Answer 1

你错过了图片路径末尾的右括号，应该是：

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

您可能还想在背景样式中设置背景重复和背景位置属性...

修改 您的列表项是否已浮动？如果是，则需要清除它们或容器将崩溃，这将导致不显示背景图像

Answer 2

您需要从定义背景图标的规则中删除height

类似

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

现在你已将它与文件路径混为一谈，因为它缺少一个括号而没有关闭。