::之前和::之后不起作用

Question

我试图在用户屏幕上修复这两个对象.请注意,我只能使用CSS修改它,因此HTML无法编辑!,这是一个CSS zen园区示例(基于'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

告诉你的::before伪元素在顶部0.
告诉你的::after伪元素在底部0.

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