Question

我正在使用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;
}

如果重要的话，我在localhost上运行它。

Answer 1

必须提供图像文件，以便浏览器可以访问它。当它在带有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

在玉中使用背景图像

1 个答案: