CSS linear-gradient渐变仅占页面底部 未正常作为页面背景生效

当前CSS存在两个直接导致显示异常的问题：

• 给body设置了固定值height: 700px，body高度被锁死在700像素，超出高度的内容区域不会被渐变覆盖，滚动时固定高度的body背景随初始渲染位置位移，视觉上就像浮在内容上层的横幅。
• 仅给body配置背景，未同步设置html根节点样式。电商建站工具自带的默认布局会给根节点、页面外层容器设置默认背景，很容易覆盖body的自定义样式，引发展示异常。

直接替换原有CSS为以下内容：

<style>
html {
  min-height: 100%;
  margin: 0;
  padding: 0;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
              linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
              linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
  background-attachment: fixed;
}
/* 若渐变被白色背景遮挡，启用以下代码，将页面最外层容器背景设为透明 */
#app, .page-wrap, .shop-container {
  background: transparent !important;
}
</style>

• 移除原代码中写死的height: 700px，改用min-height: 100vh，让body高度默认匹配视口高度，同时可随页面内容自动延展，保证所有内容区域都能覆盖渐变背景。
• 给html根节点同步设置最小高度、清零默认边距，避免浏览器默认边距导致背景边缘出现白边。
• 增加background-attachment: fixed属性，让渐变背景相对视口固定，滚动页面时背景不会随内容位移。
• 补充了建站工具常见顶层容器的透明配置，解决默认容器白色背景遮挡渐变的问题。如果你的站点顶层容器类名不匹配，直接用开发者工具选中最外层包裹节点，将其背景设置为透明即可。

内容的提问来源于stack exchange，提问作者Mckcheesy