出現背景圖片未顯示的問題

Question

我的背景圖片沒有顯示，它使我發瘋，因為我知道這很容易。

下面的div類是我試圖顯示背景的地方。

.sun-face{
    background-image: url("./images/Sun_face.svg");
}


<div class="sun-face"></div>

我的文件目錄的結構如下。

ROOT
    -css
    -fonts
    -images
    -js
    index.html
    navbar.html
    signin.html

Answer 1

使用這個CSS

.sun-face{
background-image: url("../images/Sun_face.svg");
height:500px;
}

Answer 2

我以前遇到過此問題，它是由mime型服務器問題引起的。 基本上，服務器未配置為提供.svg文件。 檢查控制台，通常情況下，您會看到類似“將資源解釋為圖像，但以MIME類型傳輸的信息...”之類的信息。 可以通過在服務器上添加幾行.htaccess文件來解決此問題。 請參閱此CSS技巧文章 。

Answer 3

所以我將其添加到內聯樣式表中

這可行，但是我想要在我的css文件中

 <style>
    .sun-face{
        background-image: url("./images/Sun_face.svg");
        height:500px;
        width:100%:
    }
    </style>


<link href="./css/custom.css" rel="stylesheet">

我把它放在^^不起作用？