css - 在 Jade 中使用背景图像

我正在使用express + node.js + Jade。我写了一个玉文件，但无法显示背景图像。我玩过body类，它似乎可以处理文本颜色，但不使用背景图像

  body {
  font-family: "Josefin Slab" !important;
  background-image: url("concursum-bg.jpg");
  background-size: cover;
  color: white;
  text-align: center;
  background-repeat: no-repeat;
  }

我确保图像与此玉文件位于同一文件夹中。

当我查看页面源代码时，html是：

body {
font-family: "Josefin Slab" !important;
background-image: url("concursum-bg.jpg");
background-size: cover;
color: white;
text-align: center;
background-repeat: no-repeat;
}

如果重要的话，我正在本地主机上运行它。

最佳答案

必须提供图像文件，以便浏览器可以访问它。当它位于包含jade文件的文件夹中时（我假设这是views目录），Express不会提供它，因此浏览器无法访问它。要解决此问题，请让服务器提供图片文件：


在主Express应用中，使用express.static从目录提供静态文件：
app.use(express.static(__dirname + "/public"));
现在，创建要从中提供文件的目录：
mkdir public
为了理智，在此处创建一个映像目录：
mkdir public/images
将文件移到那里
mv {views,public/images}/concursum-bg.jpg
更新样式表，将url("concursum-bg.jpg");更改为url("/images/concursum-bg.jpg");。
重新启动您的Express应用。


http://expressjs.com/starter/static-files.html