HTML5搞砸了渐变

时间：2013-08-28 18:37:39

标签： css html5 gradient radial

在我将doctype更改为html5后，背景渐变变得混乱，看起来像这样： Messy

如果我再次移除它，它会再次变为平滑渐变。

我的CSS代码如下：

body {
background: #3c99d4;
background: -moz-radial-gradient(center, ellipse cover,  #81e8f9 0%, #0358b5 100%);
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#81e8f9), color-stop(100%,#0358b5));
background: -webkit-radial-gradient(center, ellipse cover,  #81e8f9 0%,#0358b5 100%);
background: -o-radial-gradient(center, ellipse cover,  #81e8f9 0%,#0358b5 100%);
background: -ms-radial-gradient(center, ellipse cover,  #81e8f9 0%,#0358b5 100%);
background: radial-gradient(ellipse at center,  #81e8f9 0%,#0358b5 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#81e8f9', endColorstr='#0358b5',GradientType=1 );}

1 个答案:

答案 0 :(得分：2)

如果您想要填充视口的渐变，请尝试为<html>和<body>元素添加高度：

html, body {
  height: 100%;
}

示例：http://jsfiddle.net/xZKPJ/3/

相关问题
最新问题