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

＆＃13;

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;
}

＆＃13;

MDN Documentation for Linear-gradient

Answer 2

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

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

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

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

2 个答案: