::之前和之后没有工作

Question

我试图在用户屏幕上修复这两个对象。请注意，我只能使用CSS修改此内容，因此无法修改 HTML ！，这是CSS zen garden示例（基于＆＃39; 90s）I＆ ＃39; m尝试（这意味着您可以根据固定的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

告诉您的::before伪元素在0上升到顶部 告诉您的::after伪元素在0下方的底部。

＆＃13;

＆＃13;

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%;
}

＆＃13;

＆＃13;

＆＃13;