gpt4 book ai didi

css - 滚动到视口(viewport)上方/下方时的背景颜色?

转载 作者:行者123 更新时间:2023-12-02 20:51:50 24 4
gpt4 key购买 nike

在 Mac 上的浏览​​器中,可以向上滚动到正文元素的顶部,然后向下滚动到正文元素的底部。在每种情况下,内容都会弹回,但有一会儿(由于滚动的动量),您可以看到页面顶部/底部内容上方/下方的一些正文背景颜色。

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

是否可以在视口(viewport)上方和下方设置不同的颜色?例如,上面白色,下面黑色。

我相当确定这超出了我们的控制范围 - 因为从技术上讲,这个区域位于视口(viewport)之外 - 但我很想听听是否有人可以为我提供帮助。

最佳答案

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

由于 <body> 之间的混淆,背景渐变的渲染将会令人惊讶。和<html>浏览器为向后兼容而保留的背景。您需要提供<html>元素heightmin-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;
}

关于css - 滚动到视口(viewport)上方/下方时的背景颜色?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33588742/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com