CSS 不显示背景图片

Question

无法弄清楚为什么不显示背景图像...使用 / 和 \，短路径和长路径...任何线索将不胜感激。谢谢

<head>

<title>Restaurant Lambda</title>

<link href="css/style.css" rel="stylesheet">

</head>


<body>
<!--Menu-->
    <header>
        <div class="container">
            <nav class="topnav">
                    <a href="#home" class="active">Home</a>
                    <a href="#news">About</a>
                    <a href="#contact">Ingredients</a>
                    <a href="#contact">Menu</a>
                    <a href="#contact">Reviews</a>
                    <a href="#contact">Reservation</a>

            </div>
                </nav>

    </header>


</body>

.countainer {
    background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}

Answer 1

以及您的 class 名称中的拼写错误（container/countainer 中额外的 'u'），您的语法也不正确。您在关闭 nav 之后关闭 div，而不是相反。

更正这些错误，您的图片应该会正确显示（前提是您的路径是正确的）

.container {
  height: 100vh;
  background: url("https://cdn.pixabay.com/photo/2018/06/30/09/31/background-image-3507320__340.jpg") no-repeat 0 0;
}

nav {
  text-align: center;
}

nav a {
  color: white; /*added for better visibility*/
  font-weight: bold;
}

<body>
  <!--Menu-->
  <header>
    <div class="container">
      <nav class="topnav">
        <a href="#home" class="active">Home</a>
        <a href="#news">About</a>
        <a href="#contact">Ingredients</a>
        <a href="#contact">Menu</a>
        <a href="#contact">Reviews</a>
        <a href="#contact">Reservation</a>
      </nav>

    </div>
  </header>
</body>

Answer 2

发生这种情况实际上有 3 个原因。

在 div 中显示 <div class="container"> 但在你的 css 中你有

.countainer {
    background: url("C:/Users/lili/Desktop/LesManifestesTest/img/Bg.png") no-repeat 0 0;
}

因此您需要更正拼写错误。

把文件和图片放在一个文件夹里，然后link就好

.container {
    background: url("folder/imagename") no-repeat 0 0;
}

修正格式

在代码块中，你有 <div> 然后 <nav> 但你以 </div> 然后 </nav> 结束所以在重新格式化你的代码之后，它应该看起来像

<div class="container">
        <nav class="topnav">
                    <a href="#home" class="active">Home</a>
                    <a href="#news">About</a>
                    <a href="#contact">Ingredients</a>
                    <a href="#contact">Menu</a>
                    <a href="#contact">Reviews</a>
                    <a href="#contact">Reservation</a>

        </nav>
</div>

CSS 不显示背景图片

Background-image not showing with CSS

html

css

background