html - CSS背景渐变在浏览器中滚动时不覆盖背景

我有渐变背景。缩放页面时，渐变不起作用，仅显示背景色。

样例代码：

<html>
    <head>
        <style type="text/css">
            body {
                background: linear-gradient(to bottom, #0c8530 0%, #0c6027 200px, #0c6027 100%) no-repeat scroll 0% 0% #0c6027;
            }

            div {
                height: 200px;
            }
        </style>
    </head>
    <body>
        <div>
        blablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablablabla
        </div>
    </body>
</html>

小提琴：http://jsfiddle.net/3vLBb/

滚动时看起来像这样：

即使滚动页面，也可以使渐变正常工作吗？

最佳答案

Demo

只需在CSS no-repeat中将repeat-x更改为background，就应该像这样：

body {
    background: linear-gradient(to bottom, #0c8530 0%, #0c6027 200px, #0c6027 100%) repeat-x scroll 0% 0% #0c6027;
}

希望对你有帮助 ..