代码如下,该效果是利用css线性渐变的效果,然后利用position: fixed来定位到顶部,用z-index: -1遮住渐变背景
<html>
<body>
<style>
body::after {
content: "";
position: fixed;
top: 5px;
left: 0;
bottom: 0;
right: 0;
background: #fff;
z-index: -1;
}
body {
background-image: linear-gradient(to right top, #ffcc00 50%,#eee 50%);
background-size: 100% calc(100% - 100vh + 5px);
background-repeat: no-repeat;
}
</style>
<div class="neiron">
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
<p>neironzaizheli</p>
</div>
</body>
</html>