Question

-moz-radial-gradient(center -200px , ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat scroll 0 0 transparent;

我上面有这个代码，我才意识到这个渐变从上到下。有没有办法让它在30px之后停止整个渐变。我可以根据需要进行调整，但是如何在30px之后让渐变完成？

Answer 1

您可以一起使用background-size属性。

像这样：


    
    div {
        height:100px;
        background:-moz-radial-gradient(center, ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
        background-size:auto 30px;
    }

Answer 2

在CSS3中：

radial-gradient(ellipse at center center, 
  rgb(30, 87, 153) 0%, rgb(41, 137, 216) 100px, 
  rgba(255, 255, 255, 0) 101px, rgba(255, 255, 255, 0) 100%)

渐变中可以有多个停靠点。您还可以指定长度（以像素为单位）而不是百分比。您也可以使用 rgba 制作透明色。

你的第一个颜色是0％，即中心然后你有 x 像素的第二种颜色（我在这里使用x = 100像素）然后在 x + 1 像素处转到透明白色并保持透明，直到100％。

这应该适用于支持CSS3的浏览器。

Answer 3

css3渐变是背景图像，因此它们将填充块元素的整个高度和宽度，就像它是纯色一样。

为了限制渐变的高度，请限制元素的高度。 “干净”的方法可能是使用伪元素。有点像...

div {height: 500px; width: 500px; position: relative}

div:before {
     content: " ";
     width: 100%;
     height: 30px;
     position: absolute;
     top: 0;
     left: 0;
     z-index: -1;
     display: block;
     background-image: [your-gradient-here]
}

Answer 4

好吧，只要渐变的其余部分（在您设定的像素数之后）可以是固定颜色，只需使用三个颜色停止如下（例如，停止在30px - 注意最后一个条目与第二个相同）：

background: linear-gradient(to bottom, rgba(90,90,90,0.75) 0%,rgba(0,0,0,0.75) 30px,rgba(0,0,0,0.75) 100%);

如此多的像素后如何使css渐变停止？

4 个答案: