如何设置高度受限的双色渐变背景，避免铺满整个产品页面

你可以通过给background属性增加尺寸限制、单独设置背景层两种方式实现需求，以下是两种可直接复用的实现方案：

方案1：直接修改现有body的CSS代码 #

无需改动HTML结构，只需要给原有的body样式新增2个属性控制背景的重复规则和尺寸即可，修改后的完整代码如下：

body {
    background: rgb(255,255,255);
    background: -moz-linear-gradient(
        90deg, rgba(255,83,83,1) 0%, rgba(255,83,83,1) 50%, rgba(253,155,120,1) 50%, rgba(253,155,120,1) 100%);
    background: -webkit-linear-gradient(
        90deg, rgba(255,83,83,1) 0%, rgba(255,83,83,1) 50%, rgba(253,155,120,1) 50%, rgba(253,155,120,1) 100%);
    background: linear-gradient(
         90deg, rgba(255,83,83,1) 0%, rgba(255,83,83,1) 50%, rgba(253,155,120,1) 50%, rgba(253,155,120,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5353",endColorstr="#fd9b78",GradientType=1);
    /* 新增以下两行，按需调整高度值即可 */
    background-repeat: no-repeat;
    background-size: 100% 600px; /* 第二个参数就是你需要的背景高度，也可以用80vh这类视口单位 */
}

渐变背景只会在你设置的高度范围内显示，剩余的页面区域会自动展示body默认的白色背景，完全匹配你需要的目标效果。

方案2：单独设置背景层（适合后续需要调整背景层级/位置的场景） #

如果后续你还需要给这个双色背景加位移、交互效果、层级控制，可以不用在body上挂载背景，单独新增一个独立的背景元素即可：

1. 在HTML的body标签最开头插入如下代码：

<div class="split-bg"></div>

2. 删掉原来body上的背景相关样式，新增以下CSS：

.split-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1; /* 确保背景在所有页面内容下方 */
    width: 100%;
    height: 600px; /* 按需调整高度 */
    background: rgb(255,255,255);
    background: -moz-linear-gradient(
        90deg, rgba(255,83,83,1) 0%, rgba(255,83,83,1) 50%, rgba(253,155,120,1) 50%, rgba(253,155,120,1) 100%);
    background: -webkit-linear-gradient(
        90deg, rgba(255,83,83,1) 0%, rgba(255,83,83,1) 50%, rgba(253,155,120,1) 50%, rgba(253,155,120,1) 100%);
    background: linear-gradient(
         90deg, rgba(255,83,83,1) 0%, rgba(255,83,83,1) 50%, rgba(253,155,120,1) 50%, rgba(253,155,120,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff5353",endColorstr="#fd9b78",GradientType=1);
}
body {
    background: #fff;
}

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