4

在 Mac 上的浏览​​器中，可以向上滚动超过顶部，向下滚动到 body 元素的底部下方。在每种情况下，内容都会回弹，但有一段时间（由于滚动的动力），您可以在页面顶部/底部内容的上方/下方看到一些主体的背景颜色。

此元素的颜色由 Chrome/Safari/FF 中主体的背景颜色值设置。

是否可以在视口上方和下方设置不同的颜色？ 例如，上面白色，下面黑色。

我很确定这只是我们无法控制的——从技术上讲，这个区域在视口之外——但我很想听听是否有人可以为我提供帮助。

4

1 回答 1

1

有点。您可以使用渐变背景。从技术上讲，它仍然是一个背景，但它的不同部分将在顶部和底部可见。

背景渐变的渲染将令人惊讶，因为浏览器为了向后兼容而保留的背景<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;
}
于 2018-02-19T20:43:42.277 回答