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

Question

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

9

对于触摸设备（移动设备，平板电脑等），当页面滚出可视区域时，我需要设置页面的背景颜色：

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

html {
   background-color:#00BD9C;
}

它在电影中看起来很正常。但是我需要一个白色的底部背景颜色。对于html的background-image属性，无法滚动显示。我考虑使用渐变。还有更好的方法吗？

- Guy

你用什么工具制作了那个GIF？ - evolross

1

https://www.cockos.com/licecap/ - Guy

我遇到了同样的问题，你成功解决了吗？ - Sergio

@Sergio 使用 JavaScript 来更改背景颜色。 - Guy

2

我遇到了一个丑陋的背景颜色，想要将其移除。所以我从另一侧开始寻找。我没有找到CSS，但经过一些尝试和错误，我发现在我的<head>中有<meta name="theme-color" content="#DE0000"> 它设置了Safari在macOS和iOS上的颜色。希望这可以帮助到你。 - Stefan

我刚遇到了这个问题，本以为可以通过使用背景线性渐变来解决它。但很不幸，显然HTML元素的“background-color”有些特殊。 - Christian

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- vonox7 · Accepted Answer

在为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;
}