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

I'm trying to get these two objects fixed on the users screen. Please note that I can only modify this with using CSS so the HTML can't be edited!, this is a CSS zen garden example (based on the '90s) I'm trying (which means in short you make a design based on a fixed html file so you can 'show off' what CSS is capable off.)

我试图在用户屏幕上修复这两个对象。请注意,我只能使用CSS修改它,因此HTML无法编辑!,这是一个CSS zen园区示例(基于'90年代)我正在尝试(这意味着简而言之,你做了一个基于的设计一个固定的html文件,这样你就可以“炫耀”CSS的功能。)

You can find a live example here. http://lucasdebelder.be/zengarden/index.html

你可以在这里找到一个实例。 http://lucasdebelder.be/zengarden/index.html

I got the top fixed and working with the following syntax.

我修复了顶部并使用以下语法。

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

I then tried the ::after statement on the body. But that doesn't work how can I get the bottom image (footer) sticked to the bottom?

然后我在身体上尝试了:: 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%;
}

1 个解决方案

#1

Tell your ::before pseudo element to go up the top at 0.
Tell your ::after pseudo element to go down the bottom at 0.

告诉你的:: 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%;
}