背景圖像未在 CSS/HTML 中顯示

Question

我正在嘗試在我的小網站項目中添加背景圖片，但它根本不顯示。

我在 web 上查看了許多示例，但我發現沒有任何解決方案對我有用，盡管這似乎是一個非常常見的問題。

我要放置背景圖像的區域的 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

在您的情況下，我會在 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; 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; background-image: url(your url here); background-position: center center; background-repeat: no-repeat; background-size: contain;

Answer 3

好的，這些都不起作用，但我遇到了另一個建議，即將內部樣式表引用放在 HTML 中：

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

這終於奏效了！ 謝謝

Answer 4

我不確定它有什么問題，我在 VS 代碼中復制相對路徑並將其粘貼到 url(....

似乎太簡單而不能失敗？