css - CSS 中的最大和最小渐变大小

Question

background: -webkit-linear-gradient(#FFFFFF, #EAEAEA);
background: -o-linear-gradient(#FFFFFF, #EAEAEA);
background: -moz-linear-gradient(#FFFFFF, #EAEAEA);
background: linear-gradient(#FFFFFF, #EAEAEA);

我基本上想做的是有某种最小和最大渐变长度(例如，渐变不能小于 500px，即使背景是，也不能大于 500px，即使背景是)。我试过使用这种方法:

background-size:500px;

(以及将它与 background-repeat:y-repeat 组合)，但这不起作用，因为稍后渐变会从顶部重复自身(我想要的是它通过元素的其余部分保持其结束颜色)。

所以很快，我想知道是否有一种方法可以在一定高度后停止渐变，只允许它覆盖元素的一部分(因此，防止它在所有页面上看起来不同，具有不同大小的元素) , 不使用图像作为背景。但是，我也想知道使用这种方法是否值得，无论是在兼容性还是工作量方面。

谢谢!

Answer 1

您只需要为渐变添加色标，如下所示:

Working Example

body, html {
    height:200%;
}
body {
    background: -moz-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
        background: -webkit-linear-gradient(top, red 0px, white 500px, white 100%) no-repeat;
}

MDN Documentation for Linear-gradient