Question

在Mac上的浏览器中，可以向上滚动到顶部，然后向下滚动到body元素的底部。在每种情况下，内容快照，但暂时（由于滚动的动力），您可以在页面上方/下方看到一些身体的背景颜色＆＃39; s顶部/底部内容。

此元素的颜色显示由Chrome / Safari / FF中正文的背景颜色值设置。

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

我相当确定这只是我们无法控制的 - 从技术上来说，这个区域在视口之外 - 但是我很想知道是否有人可以为我照亮。

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

在视口上方/下方滚动时的背景颜色？

1 个答案: