背景图像未显示在 CSS/HTML 中

Question

我正在尝试在我的小网站项目中添加背景图像，但它根本没有显示。

我已经在网上浏览了许多示例，但我找到的解决方案都不适合我，尽管这似乎是一个非常普遍的问题。

我想放置背景图像的区域的HTML代码和CSS：

/* logo */
#logo-area {
display: flex;
height: 170px;
align-items:flex-end;
justify-content: center;
margin: 10px 50px;
background-image: url(vendors/img/background.jpg);
background-size: contain;
}
#logo-area img {
margin: 10px 50px;
}
#logo-area img:nth-child(1) {
height: 100%;
}
#logo-area img:nth-child(2) {
height: 40%;
}
#logo-area img:nth-child(3) {
height: 40%;
}

<!--top navigation-->
<div id="logo-area">
<img src="resources/img/Logo.png" alt="logo">
<img src="vendors/img/ABTA70ColourRGB.png" alt="ABTA">
<img src="vendors/img/iso-9001-certified-logo-AC594FAD01-seeklogo.com.png" alt="ISO9001">
</div>
<nav id="myTopnav">
<a href="index.html" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<div class="dropdown">
<button class="dropbtn"> Destinations
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Spain</a>
<a href="#">Greece</a>
<a href="#">Portugal</a>
<a href="#">Caribbean</a>
<a href="#">Far East</a>
</div>
</div>
<div class="dropdown">
<button class="dropbtn"> City breaks
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<a href="#">Paris</a>
<a href="#">Berlin</a>
<a href="#">Krakow</a>
<a href="#">Amsterdam</a>
</div>
</div>
<a href="#about">About</a>

<a href="javascript:void(0);" class="icon" onclick="dropDown()">&#9776;</a>
</nav>
<!--end of top navigation-->

任何帮助将不胜感激。

Answer 1

当您用作背景图像的图像路径有问题时，通常会出现此问题。因此，首先检查可能会起作用。

Answer 2

好的，这些都不起作用，但我遇到了另一个建议，即将内部样式表 ref 放在 HTML 中：

<div id="logo-area" style="background-image: url(vendors/img/background.jpg); background-repeat: no-repeat;">

这终于奏效了！ 谢谢

Answer 3

在您的情况下，我会在div 内创建一个 id，例如"logo-area__content"，ID 为"logo-area"，并将所有 img 放在"logo-area__content"内。 您可以将以下 CSS 分配给"徽标区域内容"display: flex; align-items:flex-end; justify-content: center; margin: 10px 50px;

将以下 CSS 分配给"徽标区域"background-image: url(your url here); background-position: center center; background-repeat: no-repeat; background-size: contain;：

Answer 4

我不确定它有什么问题，我在 VS 代码中复制相对路径并将其粘贴到 url(....

似乎太简单了，不能失败？