如何使CSS渐变在一定像素后停止？

Question

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

我有上面的代码，我刚意识到这个渐变是从上到下的。有没有办法让它在30像素后停止整个渐变呢？如有必要，我可以进行调整，但是如何使渐变在30像素后自动完成呢？

我有这段代码，现在才发现渐变是从上到下的。请问有没有方法让它在30px处停止整个渐变？我可以作出调整，但是如何让渐变在30px后自动完成呢？

- chasethesunnn

Answer 1

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

像这样:

div {
    height: 100px;
    width: 100px;
    border: 1px solid black;

    background: radial-gradient(ellipse farthest-corner, #323C49 0%, #718299 65%) no-repeat;
    background-size: auto 30px;
    background-position: top;
}

<div></div>

- doyoe

---

喜欢这种方式。唯一需要注意的是，您必须添加 background-repeat:no-repeat; :] 谢谢 - chasethesunnn

哦，算了，你的例子已经有了...哈哈。再次感谢。 - chasethesunnn

需要使用background-repeat:no-repeat。 :) - doyoe

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的浏览器。

- Anthony

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

- HandiworkNYC.com

---

在使用Bootstrap的.panel-body时，我不得不将内容的div的z-index设置为0，否则渐变div将会是不可见的。 - Alexander Taylor

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%);

- Peter Kionga-Kamau

---

这个可以在同一行上使用background-color和background-image属性，轻松实现背景图和颜色的组合。 - Camathon