如何添加背景圖像到只有一個頁面翡翠

我知道如何在普通的HTML中做到這一點，我可以添加一個類到body標籤並在css中修改該標籤，但我使用Jade，所以我不有一個身體標籤玩。我的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，但這不起作用。

那麼有什麼辦法可以做到這一點？

http://stackoverflow.com/questions/29089925/pass-variables-to-base-layout-from-extending-jade-template有你的答案。 –

基本上，如果設置了該變量，則需要修改佈局以應用類身體標記，然後從頁面內設置它。 –

@WoodrowBarlow我試過這樣做，並在index.jade中創建'body_class ='index''，並嘗試在CSS中設置'.index'，但不起作用 – OneMoreQuestion

要麼你需要添加索引類到你的文檔正文，使用這樣的東西（或加載頁面後的等價物）。

extends layout 

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

或者你可以簡單地.index類應用到容器元素的index頁面上，並確保容器跨整個頁面的背景。（根據佈局的內容，這可能有意義也可能沒有意義）。

2016-08-26 20:40:40 WookieCoder

我接受了上面的答案，但我最終創建了一個單獨的樣式表來定製頁面。似乎是一個更簡單的解決方案。

2016-08-29 02:39:43 OneMoreQuestion

回答