Jade模板引擎 / 如何设置背景图片

Question

我想在使用Jade渲染的HTML页面中设置背景图片。 有人知道如何实现吗？

谢谢。

- user937284

Answer 1

你可以像这样设置style属性：

div(style='background-image: url(/myImage.jpg);')

然而，你应该避免使用内联样式。将内容与设计分离 - 将html和css保持在不同的文件中。

在jade中了解更多关于属性的信息这里。

- JAM

---

如果你正在尝试在模板中设置图像，那很可能是为了动态内容...可能看起来像这样： div(style='background-image: url(images/' + post.img + ');') 其中，post.img 是图像的文件名。 - Malcolm Dwyer

Answer 2

背景图片是在页面的CSS中设置的。这与Jade几乎无关。

因此，在您的页面CSS中：

body {
    background-image: url(/images/img1.jpg);
}

或者使用一个类，然后将其分配给Jade模板中的一个元素：

.bkimg {
    background-image: url(/images/img1.jpg);
}

而玉石：

body.bkimg
    p this is a fine body

同样的规则适用于任何元素类型。

- Gabriel Petrovay