更改徑向漸變的中心點在CSS

Question

我需要讓多個梯度象下面這樣：

現在看到的灰/白漸變不同的中心，在某些情況下，來自中心，一些從左中心，一些從中下。

我用THIS，工具生成以下梯度：

background: #f9f9f9; 
background: -moz-radial-gradient(center, ellipse cover, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
background: -webkit-radial-gradient(center, ellipse cover, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%); 
background: radial-gradient(ellipse at center, #f9f9f9 0%,#e1e4e8 62%,#d1d6db 100%); 
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9', endColorstr='#d1d6db',GradientType=1); 

FIDDLE HERE，現在有可能使梯度等我如何在圖像中示出的上方，或我將不得不使用圖像？

Answer 1

有兩個部分你的問題：

1. 是否有可能使梯度像的圖像？對的，這是可能的。 radial-gradient definition takes the position as a parameter並通過設置正確的值，我們可以產生所需的效果。
2. 梯度發生器本身可以生成它嗎？似乎並不是所關聯的發生器可以這樣做，因爲方向設置爲徑向的時刻，它默認位置居中，並且沒有字段可以更改其值。可能有其他的梯度發生器有一個設置這個值的字段，但你仍然必須自己提供中心點。

以下是帶有不同位置的徑向漸變片段供您參考。

div { 
 
    float: left; 
 
    height: 200px; 
 
    width: 200px; 
 
    margin: 2px; 
 
    background: #f9f9f9; 
 
    } 
 
div:nth-of-type(1){ 
 
    background: radial-gradient(ellipse at center, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(2){ 
 
    background: radial-gradient(ellipse at left bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(3){ 
 
    background: radial-gradient(ellipse at left top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(4){ 
 
    background: radial-gradient(ellipse at right bottom, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(5){ 
 
    background: radial-gradient(ellipse at right top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(6){ 
 
    background: radial-gradient(ellipse at center top, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(7){ 
 
    background: radial-gradient(ellipse at 10% 20%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(8){ 
 
    background: radial-gradient(ellipse at 75% 75%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
} 
 
div:nth-of-type(9){ 
 
    background: radial-gradient(ellipse at 20% 80%, #f9f9f9 0%, #e1e4e8 62%, #d1d6db 100%); 
 
}

<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div> 
 
<div></div>

Answer 2

徑向漸變非常混亂，但是看看我的教程：

<div class='wet'> </div> 
<style> 
.wet{ 
    width: 100px; 
    height: 100px; 
    border-radius: 15px; 
    background: -webkit-radial-gradient(#159, #394ee); 
} 
</style>