옥에있는 한 페이지에만 배경 이미지를 추가하는 방법

일반 HTML에서이를 수행하는 방법을 알고 있습니다. body 태그에 클래스를 추가하고 CSS에서 해당 태그를 수정할 수는 있지만 옥을 사용하고 있습니다. 함께 놀 수있는 body 태그가 있습니다. My 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가 있기 때문에 최적이 아닙니다. 어색한 간격을줍니다. 이 페이지에. 아래 의견 제안 및 index.jade 내 body_class = index을 설정 한

extends layout 

block main 
    .container.backgroundimage 
     h1 Hello world

나는 this을 수행했습니다. CSS에서 .index의 스타일을 시도했지만이 방법도 효과가 없습니다.

이렇게 할 수있는 방법이 있습니까?

출처

2016-08-26 OneMoreQuestion

http://stackoverflow.com/questions/29089925/pass-variables-to-base-layout-from-extending-jade-template에 답이 있습니다. –

기본적으로, 해당 변수가 설정된 경우 body 태그에 클래스를 적용하려면 레이아웃을 수정 한 다음 페이지에서 설정해야합니다. –

@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

옥에있는 한 페이지에만 배경 이미지를 추가하는 방법

답변

관련 문제