如何创建全覆盖径向渐变?

moo*_*ara 6 html css css3

我正在使用类似下面的CSS代码来创建径向渐变背景:

body
{
background-color:   #0176A0;
background-image:   -moz-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   -webkit-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   -o-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   -ms-radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
background-image:   radial-gradient(center, ellipse cover, #029CC9 0%, #005077 100%);
filter:             progid:DXImageTransform.Microsoft.gradient(startColorstr = '#029CC9', endColorstr = '#005077', GradientType = 0);
}
Run Code Online (Sandbox Code Playgroud)

但结果不是预期的!我的目标是拥有一个覆盖整个视口的径向渐变背景.我可以使用background-size属于CSS3规范的属性来获得更好的结果,但不幸的是这个属性在IE中不起作用?
有人有想法吗?

Cir*_*e B 11

将其添加到您的CSS:

html {
    height: 100%
}
Run Code Online (Sandbox Code Playgroud)


小智 11

更好的是:

html {
    min-height: 100%;
}
Run Code Online (Sandbox Code Playgroud)

这将使渐变扩展到您的内容高度,否则它将仅限于窗口高度.