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类型转移的内容......＆＃39;。这可以通过在服务器上添加几行.htaccess文件来解决。请参阅此css-tricks article。

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">

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

有背景图像没有显示的问题

3 个答案: