CSS导航菜单背景图像

时间:2018-02-02 11:57:02

标签: html css image menu background

我想要实现一个带有响应背景图像的水平菜单。

我的问题是,如果我放入全屏窗口,'ul'菜单会相对于背景图像移动。我甚至尝试在'div'容器内设置两个不同的'div'(一个用于图像,另一个用于菜单),但它不起作用。

此外,如果我调整大小,窗口大小最小,菜单会从图像栏中显示出来。

我不想使用'px'设置,因为我想获得尽可能响应的网站。

HTML和CSS:

.menu {
  margin-top: 1%;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  height: 11vh;
  background: url(../Images/menu.png) no-repeat;
  background-size: 90% 10vh;
  margin-bottom: 5%;
}
<body class="container">
  <div class="menu">
    <ul>
        <li> foo1 </li>
        <li> foo2 
            <ul>
              <li> sub </li>
            </ul>
        </li>
        <li> foo3 </li>
    </ul>
  </div>
</body>

2 个答案:

答案 0 :(得分:2)

替换你的:

background: url(../Images/menu.png) no-repeat;

使用:

background-image: url("../Images/menu.png");
background-repeat: no-repeat;

提示:确保img的路径正确无误。

我使用了以上内容并且它有效(当然是我的img)。

现在对于响应部分,更常见的是添加3个图像,每个分辨率为1,并根据您将设置的@media查询设置每个图像。

例如:

@media (max-width: 1200px) {
    .menu {
        background-image: url("../Images/menu1200.png");
    }
   }

@media (max-width: 767px) {
    .menu {
        background-image: url("../Images/menu767.png");
    }
   }

@media (max-width: 480px) {
    .menu {
        background-image: url("../Images/menu480.png");
    }
   }

最后,创建响应式菜单的最佳方法是使用bootstrap。您应该在navigation bar

了解更多信息

答案 1 :(得分:0)

在html标准中,一个ul canot是另一个ul的子节点,你应该把这样的代码放在这里以避免html验证错误

<ul>
     <li> foo1 </li>
     <li> foo2  
            <ul> 
                        <li> sub </li> 
            </ul>
     </li>
      <li> foo3 </li>
</ul>
小孩ul应该有李的父母 然后做样式