如何將背景圖像添加到導航欄？

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>