如何在 Jade 中仅将背景图像添加到一页答案

【问题标题】：How to add background image to only one page in Jade如何在 Jade 中仅将背景图像添加到一页
【发布时间】：2016-08-26 19:20:38
【问题描述】：

我知道如何在常规 HTML 中执行此操作，我可以向 body 标签添加一个类并在 css 中修改该标签，但我使用的是 Jade，所以我没有 body 标签可以玩。我的 Jade 文件看起来像这样。

index.jade（我唯一希望有背景图片的页面）

extends layout

block main
    .container
        h1 Hello world

我试过了

body.index {
    background: url(images/background.jpg);
    background-size: cover;
    z-index: -1;
}

这不起作用。我还尝试将 backgroundimage 类添加到容器类中，并使其宽度和高度为 100%，如下所示，但这不是最佳选择，因为在 layout.jade 之前还有另一个 div（文件索引扩展），这给了一个尴尬的间距在这个页面上。

extends layout

block main
    .container.backgroundimage
        h1 Hello world

我尝试按照以下 cmets 中的建议执行 this，并将我的 body_class = index 设置在 index.jade 中。并尝试在 css 中设置.index 的样式，但这也不起作用。

那么有什么办法可以做到这一点吗？

【问题讨论】：

stackoverflow.com/questions/29089925/… 有你的答案。
基本上，如果设置了该变量，您需要修改布局以将类应用到 body 标记，然后在您的页面中设置它。
@WoodrowBarlow 我尝试这样做，并在 index.jade 中创建了 body_class = 'index'，并尝试在 css 中设置 .index 的样式，但不起作用

【解决方案1】：

我已经接受了上述答案，但我最终只是创建了一个单独的样式表来自定义页面。似乎是一个更简单的解决方案。

【讨论】：

【解决方案2】：

您需要将索引类添加到文档正文中，使用类似这样的方法（或在页面加载后的等效方法）。

extends layout

block main
    - document.getElementByTagName("body").classList.add("index")
    .container.backgroundimage
        h1 Hello world

或者您可以简单地将.index 类应用于index 页面上的容器元素，并确保该容器跨越整个页面背景。（根据您的布局内容，这可能有意义，也可能没有意义）。

【讨论】：