Html 在浏览器中滚动时，Css背景渐变不覆盖背景_Html_Css_Gradient

Html 在浏览器中滚动时，Css背景渐变不覆盖背景

html css

Html 在浏览器中滚动时，Css背景渐变不覆盖背景,html,css,gradient,Html,Css,Gradient,我有一个渐变背景。缩放页面时，渐变不起作用，只显示背景色示例代码： <html> <head> <style type="text/css"> body { background: linear-gradient(to bottom, #0c8530 0%, #0c6027 200px, #0c6027 100%) no-repeat scroll 0% 0% #0c6027;

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

示例代码：

<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>


身体{
背景：线性渐变（至底部，#0c8530 0%，#0c6027 200px，#0c6027 100%）无重复滚动0%0%#0c6027；
}
div{
高度：200px；
}
布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉布拉

小提琴：

在滚动时，如下所示：

即使在滚动页面时，也可以使渐变按预期工作吗？

在CSS中将HTML标记的宽度和高度设置为100%。如果无法自行修复，请将body标签的宽度和高度设置为100%。

试试这个

只需将

no repeat

更改为

repeat-x

在您的CSS

背景中，因此应该是这样的：
body {
    background: linear-gradient(to bottom, #0c8530 0%, #0c6027 200px, #0c6027 100%) repeat-x scroll 0% 0% #0c6027;
}

希望这会对你有所帮助。看起来完全一样？！滚动（水平）查看问题。
html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body{
  background: -webkit-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* Standard syntax */
}

html {
    height: 100%;
}
body {
    height: 100%;
    margin: 0;
    background-repeat: no-repeat;
    background-attachment: fixed;
}
body{
  background: -webkit-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Safari 5.1 to 6.0 */
  background: -o-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Opera 11.1 to 12.0 */
  background: -moz-linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* For Firefox 3.6 to 15 */
  background: linear-gradient(to bottom, #002265, #5397be 58%, #ffc48c 82%,#ff7900 98%); /* Standard syntax */
}