CSS中最大和最小的梯度大小

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

What I basically want to do, is to have some sort of minimum and maximum gradient length (for instance, the gradient can't be smaller than 500px, even if the background is, and neither can it be bigger than 500px, even if the background is). I have tried using this method:

我主要想做的是，有一些最小的和最大的梯度长度(例如，梯度不能小于500px，即使背景是500px，也不能大于500px，即使背景是500px)。我试过用这个方法:

background-size:500px;

(aswell as combining it with background-repeat:y-repeat), but that doesn't work, since the gradient later on repeats itself from top (and what I would like is for it to maintain its ending-color through the rest of the element).

(也可以将它与背景-重复:y-重复)结合在一起，但这并不奏效，因为后面的渐变会从顶部重复(我希望它通过元素的其他部分来保持它的结束色)。

So shortly, I'm wondering if there's a way to stop a gradient after a certain height, only allowing it to cover a part of the element (hence, preventing it from looking different on all pages, with different sized elements), without using images as background. However, I'd also like to know if using this method is worth it, both when it comes to compatibility and effort.

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

Thanks!

谢谢!

2 个解决方案

#1

You just need to add color stops to your gradient, like so:

你只需要添加颜色到你的渐变，就像这样:

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

MDN文档线性渐变

#2

So I made the following test fiddle, and it seems that if you specify a background-size then the gradient will be resized to that size regardless of the element dimensions (note that you have to explicitly define a width and a hight for background-size to work properly in Firefox).

所以我做了如下的测试，看起来如果你指定一个背景尺寸，那么不管元素的大小，渐变都会被调整到那个大小(注意，你必须明确地定义一个背景尺寸的宽度和高度，才能在Firefox中正常工作)。

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

I have checked this in latest Chrome, Safari and Firefox and looks the same in all three borwsers.

我在最新的Chrome、Safari和Firefox中都做过检查，这三个浏览器看起来都一样。

#1