Question

我知道如何在常规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

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

那么我有办法实现这个目标吗？

Answer 1

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

Answer 2

您需要使用类似的内容（或加载页面后的等效项）将索引类添加到文档正文中。

extends layout

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

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