如何将背景图像添加到导航栏？

Question

我在向导航栏添加图片时遇到问题。 我试过添加

#header, #nav {
background-image: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
}

HTML：

<nav>
  <ul>
  </ul>
</nav>
</header>

CSS：

  #header #nav { 
  background-image: url(https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg);
  background-repeat: repeat;
}

我希望导航栏有大理石背景

Answer 1

试一试。 此外，我将您的背景图像样式更改为背景，以便您可以包含“重复”速记属性。 HTML

<header>
    <nav>
        <ul></ul>
    </nav>
</header>

CSS

    header, nav {
    background: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat;
    width: 300px;
    height: 200px;
}

Answer 2

首先，您将css属性分配给具有ID标题和导航的元素。 如果是这种情况，请将id属性添加到每个元素。

其次，background-image属性只允许您设置背景图像，但您希望图像重复，而不是使用background

最后，背景图像需要元素具有定义的高度或内容才能可见

以下是最终代码的外观：

 #header, #nav { background: url("https://img.freepik.com/free-photo/white-marble-texture-background_38679-514.jpg?size=626&ext=jpg") repeat; height: 100px; } 

 <header id="header"> <nav id="nav"> <ul></ul> </nav> </header>