Wie man Hintergrundbild nur einer Seite in Jade hinzufügt

Ich weiß, wie man dies in regulärem HTML tut, ich kann eine Klasse zum body-Tag hinzufügen und dieses Tag in css ändern, aber ich benutze Jade, also tue ich das nicht habe ein Body-Tag zum Spielen. Meine Jade-Datei, die so aussieht.Wie man Hintergrundbild nur einer Seite in Jade hinzufügt

index.jade (die einzige Seite, die ich in ein Hintergrundbild haben will)

extends layout 

block main 
    .container 
     h1 Hello world

Ich versuchte

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

Das funktioniert nicht tun. Ich habe auch versucht, eine Hintergrundbildklasse zur Behälterklasse hinzuzufügen und seine Breite und Höhe 100% wie unten zu machen, aber es ist nicht optimal, weil es ein anderes div gibt, das in layout.jade kommt (der Aktenindex erweitert), der einen schwierigen Abstand gibt auf dieser Seite.

extends layout 

block main 
    .container.backgroundimage 
     h1 Hello world

Ich versuchte this tun, wie unten in den Kommentaren vorgeschlagen und stellte meine body_class = index in index.jade. Und versucht, .index in CSS zu stylen, aber das funktioniert auch nicht.

Also gibt es eine Möglichkeit, die ich erreichen kann?

Quelle

2016-08-26 OneMoreQuestion

http://stackoverflow.com/questions/29089925/pass-variables-to-base-layout-from-extending-jade-template hat Ihre Antwort. –

Im Grunde müssen Sie Ihr Layout ändern, um eine Klasse das body-Tag anzuwenden, wenn diese Variable festgelegt ist, und es dann innerhalb Ihrer Seite festlegen. –

@WoodrowBarlow Ich habe versucht, dies zu tun, und machte 'body_class = 'index' in index.jade und versuchte,' .index' in CSS zu stylen, aber funktioniert nicht – OneMoreQuestion

Entweder Sie müssen die Indexklasse zu Ihrem Dokumentkörper hinzufügen, indem Sie etwas wie dieses verwenden (oder ein Äquivalent, nachdem die Seite geladen wurde).

extends layout 

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

Oder Sie könnten die .index Klasse dem Containerelement auf Ihrer Seite index einfach anzuwenden, und stellen Sie sicher, dass der Behälter die gesamte Seite Hintergrund erstreckt. (Dies kann oder kann nicht sinnvoll sein, abhängig von den Inhalten Ihres Layouts).

Quelle

2016-08-26 20:40:40 WookieCoder

Ich habe die obige Antwort akzeptiert, aber ich habe nur ein separates Stylesheet erstellt, das die Seite angepasst hat. Scheint eine viel einfachere Lösung zu sein.

Quelle

2016-08-29 02:39:43 OneMoreQuestion

Wie man Hintergrundbild nur einer Seite in Jade hinzufügt

Antwort

Verwandte Themen