2013-10-26 80 views
5

我一直在尝试创建径向背景,除了某些原因,我所能得到的只是一条线。我不知道我做错了什么,有什么想法?CSS3径向渐变显示为线

的jsfiddle:http://jsfiddle.net/3QSFj/1/

CSS:

background: -webkit-gradient(radial, circle, 0, circle, 70, color-stop(0%, #718aa7), color-stop(70%, #203044)); 
background: -webkit-radial-gradient(circle, #718aa7 0%, #203044 70%); 
background: -moz-radial-gradient(circle, #718aa7 0%, #203044 70%); 
background: -o-radial-gradient(circle, #718aa7 0%, #203044 70%); 
background: radial-gradient(circle, #718aa7 0%, #203044 70%); 

回答

5

设置你的bodyheight100%,你body元素是空的,因此它不具有任何height,该background简直是repeated那里。 。Bad Demo

html, body { 
    height: 100%; 
} 

Demo

此外,您background会重复,所以你需要background-attachment: fixed;以及background-repeat: no-repeat

Demo 2