CSS中的最大和最小渐变大小答案

【问题标题】：Maximum and minimum gradient size in CSSCSS中的最大和最小渐变大小
【发布时间】：2013-11-03 14:32:16
【问题描述】：

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 结合使用），但这不起作用，因为渐变稍后会从顶部重复（我希望它在其余部分保持其结束颜色）元素）。

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

谢谢！

【问题讨论】：

标签： css background linear-gradients gradient

【解决方案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

【讨论】：

很抱歉之前没有接受这个（我忘了）。迟到总比没有好：D

【解决方案2】：

所以我做了以下测试小提琴，似乎如果您指定background-size，那么无论元素尺寸如何，渐变都将调整为该大小（请注意，您必须明确定义宽度和高度background-size 在 Firefox 中正常工作）。

http://jsfiddle.net/myajouri/y4b3Z/

我已经在最新的 Chrome、Safari 和 Firefox 中检查了这一点，并且在所有三个 borwsers 中看起来都一样。

【讨论】：