如何在导航栏上设置背景图片？答案

【问题标题】：How to to set a background image on a navigation bar?如何在导航栏上设置背景图片？
【发布时间】：2012-03-29 05:02:36
【问题描述】：

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

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

css:

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

我在网上搜索了解决方案，但没有找到任何可行的方法。我试过位置、大小和重复。

编辑：我已将ul 和li 菜单内联，因此它们适合40px 的高度。

【问题讨论】：

【解决方案1】：

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

类似

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

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

【讨论】：

【解决方案2】：

您缺少图像路径末尾的右括号，应该是：

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

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

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

【讨论】：