如何设置滚动拉动页面的背景颜色？

Question

使用触摸设备（移动设备、触摸板等）时，我需要在滚出正文时设置页面的背景颜色：

我尝试设置 HTML 的背景颜色：

html {
   background-color:#00BD9C;
}

它像电影中看到的那样工作。但是我需要页面底部的白色背景色。html 的背景图像不适用于滚动。我想过使用渐变。有没有更好的办法？

Answer 1

当为 html 设置背景时，它将应用于所有四个边框。如果您只想在顶部站点上有背景颜色，请div向 DOM 添加一个元素以显示在页面上方：

<div style="height:1000px;background:#00BD9C;margin-top:-1000px;position:fixed;width:100%;"></div>

这样，溢出颜色将仅应用在顶部。

或者你也可以在纯 CSS 中添加它：

html:before {
  content: '';
  position: fixed;
  width: 100%;
  height: 999px;
  top: -999px;
  background-color: tomato;
}