Question

有没有办法像css这样使用http://imgur.com/dA7RcsQ制作渐变？

我已尝试使用background-position代码

但它对我没有用，可能是因为我不知道精灵是如何运作的。

Answer 1

它是一个简单的径向梯度。这应该会让你走上正确的轨道。

circle 150px表示它是一个半径为150px
at 25% 33%定义了原点（我从左边看1/4，从上边看1/3）你还可以使用px或其他长度。
最后给出中心的颜色。

＆＃13;

div{
  height: 200px;
  border: 1px solid;
  background-image: radial-gradient(circle 150px at 25% 33%, white, yellow, lightyellow, aqua);
}

＆＃13;

  <div></div>

＆＃13;

Answer 2

径向渐变很容易。这是一个例子 -

#gradient {
height: 150px;
width: 150px;
background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 to 6.0 */
background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Opera 11.6 to 12.0 */
background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* For Firefox 3.6 to 15 */
background: radial-gradient(farthest-side at 60% 55%,blue,green,yellow,black); /* Standard syntax (must be last) */
}

此处的文档 - http://www.w3schools.com/css/css3_gradients.asp

Answer 3

three{
width:100%;
height:300px;
border:1px solid white;    
 background-image:radial-gradient( circle 80px at 25% 25% , rgb(255,255,255) 10%,rgba(251, 255, 185, .7), rgb(255,255,255) 60% 70%,rgb(2,153,218) 200%);}

如果需要，请根据需要更改其位置。

如何使用CSS制作这样的渐变太阳效果？

3 个答案: