CSS沒有加載本地圖像？

Question

我正在嘗試使用CSS使用html文件在我的網站上顯示PC中的圖像。 css，圖像和html文件位於與Web瀏覽器檢查器中所示圖像相同的目錄中，如圖所示，但未在頁面中顯示其自檢元素

 .logo { background: url(https://placekitten.com/100/100); } 

 <div class="logo"></div> 

Answer 1

div沒有高度-CSS中沒有明確的height ，正常流程中也沒有內容可以指定高度的height: auto默認情況下為height: auto 。

由於沒有高度，因此高度為0像素。 將高度乘以寬度，您將得到一個0平方像素的框。

畫布大小為0時， 沒有空間在上顯示圖像 。

做一些事情使其高度。

 .logo { background: url(https://placekitten.com/100/100); } 

 <div class="logo"> Here is some content. </div> 

---

也就是說，徽標是傳達信息的東西。 它不是裝飾性的。 您應該使用HTML而不是CSS來表達它，並包含alt text 。

 <div class="logo"> <img src="https://placekitten.com/100/100" alt="Kitten Inc."> </div> 

Answer 2

“ logo”類必須具有高度才能顯示其內容，您可以通過多種方式設置高度：

01

在您的CSS中，轉到“ .login”並在{}之間寫：height：100px;

結果

.logo{
     height:100px
}

02

像這樣的內聯

<div class="logo" style="height:100px"></div>

03

像這樣使用jQuery

$('.logo').height(100);

要么

$('.logo').css('height','100px');