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

以及类名中的错字（容器/计数器中的额外“ 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;
}

因此，您需要纠正拼写错误。

将文件和图像放在文件夹中，然后像链接一样

.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无法显示背景图片

2 个答案: