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

【问题标题】：Background image not showing in CSS/ HTML背景图像未在 CSS/HTML 中显示
【发布时间】：2020-10-20 20:57:09
【问题描述】：

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

我浏览了网络上的大量示例，但我发现没有任何解决方案对我有用，尽管这似乎是一个非常常见的问题。

我要放置背景图片的区域的 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-->

任何帮助将不胜感激。

【问题讨论】：

检查路径是否正确，如果你的图片加载完毕，在浏览器控制台中检查
相对于“供应商”文件夹，您的 CSS 文件位于何处？正如所有答案都会告诉你的那样，图像路径应该相对于 CSS 文件的位置，而不是相对于 HTML 文件。这与img 标签的路径不同。
这能回答你的问题吗？ CSS Background Image Not Displaying

标签： html css background-image

【解决方案1】：

当您用作背景图像的图像路径有问题时，通常会出现此问题。所以，先检查一下可能会奏效。

【讨论】：

【解决方案2】：

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

似乎太简单了以至于不能失败？

【讨论】：

请不要使用 cmets 的答案或对问题的补充。相反，请编辑您的问题以添加相关信息。

【解决方案3】：

在您的情况下，我将在 id 为“logo-area”的 div 中创建一个 id 为“logo-area__content”的 div，并将所有 img 放在“logo-area__content”中。您可以将以下 css 分配给“logo-area-content”display: flex; align-items:flex-end; justify-content: center; margin: 10px 50px;

将以下 css 分配给“logo-area”：background-image: url(your url here); background-position: center center; background-repeat: no-repeat; background-size: contain;

【讨论】：

【解决方案4】：

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

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

终于成功了！谢谢

【讨论】：