html - 为什么背景渐变不缩放？

Question

我的背景中的 CSS 渐变无法缩放，我该怎么办？我打算按百分比来做一个 HTML 布局，但是 body 渐变太短了。

示例：http: //jsfiddle.net/snGVt/

<div class="wrapper">
    <div class="box round"><img src="http://goo.gl/wv4zi" /></div>
    <div class="box round"><img src="http://goo.gl/wv4zi" /></div>
</div>

html{
    height: 100%;
    width:100%;
}

body {
    width:100%;
    background: #0e89b6; /* Old browsers */
    background: -moz-linear-gradient(top,  #0e89b6 0%, #00142c 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#0e89b6), color-stop(100%,#00142c)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #0e89b6 0%,#00142c 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #0e89b6 0%,#00142c 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #0e89b6 0%,#00142c 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #0e89b6 0%,#00142c 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e89b6', endColorstr='#00142c',GradientType=0 ); /* IE6-9 */
}

.wrapper {

    width: 60%;
    margin-left: auto;
    margin-right: auto;
}

.box{
    width: 100%;
    margin-top: 10px;
    padding: 25px;
    background-color: #fff;
}

.box > img{
    width: 100%;
}

Answer 1

尝试将 html 宽度和高度样式更改为 "min-height: 100%" 和 min-width: 100%"

html{
   min-height: 100%;
   min-width:100%;
}

Answer 2

使用background-size.

CSS3 渐变可以认为是生成固定大小图像的函数，因此仍然需要使用 size 属性进行控制。

Answer 3

在 IE9 中，渐变边缘有一些边距。你应该设置你的body和html没有边距。那是你遇到的问题吗？

html,body {
    margin: 0;
}

请注意，在其他浏览器中这对我来说不是问题。