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

Question

我知道如何在常规 HTML 中执行此操作，我可以将 class 添加到 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;
}

这不起作用。我还尝试将背景图像 class 添加到容器 class 并使其宽度和高度为 100%，如下所示，但它不是最佳选择，因为在 [=] 之前还有另一个 div 29=]（文件索引扩展）在这个页面上给出了一个尴尬的间距。

extends layout

block main
    .container.backgroundimage
        h1 Hello world

我尝试按照下面评论中的建议进行，并将我的 body_class = index 设置为 index.jade。并尝试在 css 中设置 .index 样式，但这也不起作用。

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

Answer 1

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

extends layout

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

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

Answer 2

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

How to add background image to only one page in Jade