如何设置限制高度的背景颜色

Question

我已经使用这段代码将背景分成两部分，使用 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);
}

但我希望这个背景限制在高度上，我不希望它一直扩展到我的产品页面的底部，使用此代码我的产品页面看起来像这样：

但我想达到这个结果

请问我该怎么做

非常感谢

Answer 1

互联网上有很多关于这种情况的例子。您只需使用background-size，这是文档：CSS Backgrounds。在你的情况下，这看起来像：

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);
    -o-background-size: auto 400px;
    -webkit-background-size:auto 400px;
    -moz-background-size: auto 400px;
    background-size: auto 400px;
}

background-size的第一个参数是宽度，第二个是高度。所以这个例子会让你的背景大小为400px。