4 
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:

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).

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!

4

2 回答 2

3

您只需要在渐变中添加色标，如下所示：

工作示例

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 文档

于 2013-11-03T14:56:56.447 回答
0

所以我做了以下测试小提琴，似乎如果你指定 abackground-size那么渐变将被调整为该大小而不管元素尺寸（请注意，你必须明确定义宽度和高度background-size才能在 Firefox 中正常工作） .

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

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

于 2013-11-03T15:04:21.913 回答