为什么background-gradient不能缩放？

我在后台的CSS渐变不能缩放，我该怎么办？我打算做百分比的HTML布局，但身体渐变太短。为什么background-gradient不能缩放？

<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%; 
}

来源

2013-03-01 user1477955

完全适合我。你可以发布它看起来像你的屏幕截图吗？你使用的是什么浏览器？ – Leeish 2013-03-01 23:37:53

向我们展示您的渐变样式 – DiMono 2013-03-01 23:37:59

从'html'中删除宽度/高度声明... – Shmiddty 2013-03-01 23:39:57

尝试改变的HTML宽度和高度样式为 “最小高度：100％” 和最小宽度：100％”

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

来源

2013-03-01 23:38:34 mst1228

使用background-size。

CSS3渐变s可以被认为是生成固定尺寸图像的函数，所以它们仍然需要用size属性来控制。

来源

2013-03-01 23:39:47 Dai

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

html,body { 
    margin: 0; 
}

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

来源

2013-03-01 23:41:50 Leeish

为什么background-gradient不能缩放？

回答

相关问题