我正在使用类似下面的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);
}
但结果不是预期的结果!我的目标是拥有一个覆盖整个视口的径向渐变背景。我可以使用background-size
属性作为CSS3规范的一部分来获得更好的结果,但遗憾的是这个属性在IE中不起作用?
有人有想法吗?
答案 0 :(得分:11)
将此添加到您的CSS:
html {
height: 100%
}
答案 1 :(得分:11)
更好:
html {
min-height: 100%;
}
这将使渐变扩展到您的内容高度,否则它将仅限于窗口高度。