:: before 및 :: after가 작동하지 않습니다.

Question

사용자 화면에서이 두 객체를 고정하려고합니다. CSS를 사용하여 수정할 수 있습니다. HTML을 편집 할 수 없습니다.!이 태그는 CSS zen garden 예 ('90 년대 기준)입니다. 즉, 짧게 말해서 다음을 기반으로하는 디자인을 의미합니다. 고정 된 html 파일은 그래서 당신은 해제 할 것을 CSS '자랑'할 수 있습니다.)

당신은 여기에 라이브 예를 찾을 수 있습니다. http://lucasdebelder.be/zengarden/index.html

나는 고정 다음과 같은 구문을 작업 상단 을 얻었다.

body::before { 
    content: ''; 
    position: fixed; 
    width: 100%; 
    height: 12.5%; 
    background: url(header_browser.svg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    z-index: 5000; 
    background-size: 100%; 
} 

다음 본문에서 :: after 문을 사용했습니다. 그러나 그것은 어떻게 작동하지 않습니다 아래쪽 이미지 (바닥 글) 하단에 붙어 얻을 수 있습니까?

body::after { 
    content: ''; 
    position: fixed; 
    width: 100%; 
    height: 12.5%; 
    background: url(footer_browser.svg); 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    z-index: 5000; 
    background-size: 100%; 
} 

Answer 1

는 0에서 정상을 오르기 위해 당신의 ::before 의사 요소를 알려주십시오.
0에서 아래쪽으로 가도록 ::after 의사 요소에게 알립니다.

body::before { 
 
    content: ''; 
 
    position: fixed; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 12.5%; 
 
    background: #0f0; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    z-index: 5000; 
 
    background-size: 100%; 
 
} 
 

 
body::after { 
 
    content: ''; 
 
    position: fixed; 
 
    bottom: 0; 
 
    width: 100%; 
 
    height: 12.5%; 
 
    background: #f00; 
 
    background-repeat: no-repeat; 
 
    background-attachment: fixed; 
 
    z-index: 5000; 
 
    background-size: 100%; 
 
}