多框 CSS 渐变重启

Question

这是我的 jsfiddle 的链接。 http://jsfiddle.net/inthenameofmusik/ddto077m/5/

渐变在它看起来的每个盒子或元素中一遍又一遍地重新开始。我不确定我的 CSS 有什么问题。任何帮助表示赞赏。

body {
background: linear-gradient(#1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); /* W3C */
}

我确定这是一个简单的修复，对于这个问题的 CSS 初学者感到抱歉。

Answer 1

您需要在样式中添加html, body {height:100%;} 以强制浏览器以全高呈现html 父标记。目前它只渲染了大约 100px 高，并且身体背景在重复。

看到这个update fiddle for example。