在 Mac 上的浏览器中，可以向上滚动超过 body 元素的顶部，并向下滚动到 body 元素的底部以下。在每种情况下，内容都会弹回来，但有一会儿（由于滚动的动力），您可以在页面顶部/底部内容的上方/下方看到一些正文的背景颜色。
\n\n该元素的颜色由 Chrome/Safari/FF 中主体的背景颜色值设置。
\n\n是否可以在视口上方和下方设置不同的颜色？\n例如，上面白色，下面黑色。
\n\n我相当确定这超出了我们的控制 \xe2\x80\x94 因为从技术上讲，这个区域位于视口 \xe2\x80\x94 之外，但我很想听听是否有人可以为我提供帮助。
\n有点。您可以使用渐变背景。从技术上讲，它仍然是一个背景，但它的不同部分将在顶部和底部可见。
背景渐变的渲染将会令人惊讶，因为浏览器为向后兼容而保留的背景<body>之间存在混淆。<html>您需要给出<html>元素height或min-height，否则背景渐变将使用 的<body>高度！
html {
background: linear-gradient(red, blue); // use color stops for hard edge
min-height: 100%;
}
如果您想用页面内容的另一种背景颜色覆盖它，则需要克服height:auto边距崩溃的烦恼：
html {
background: linear-gradient(red, blue);
height: 100%;
}
body {
background: green;
height: 100%;
margin: 0; padding: 1em;
}