html - 具有可调整大小的 div 内容的响应式背景

Question

我在plunker做了一个例子更好地解释我的问题。我的问题是当我使用窗口大小时，背景是响应式的并且一切都很好，但是如果我扩展内容超过窗口大小然后向下滚动，我会看到背景颜色是如何重复的。我已经尝试了很多方法来解决这个问题，但结果总是相似的。如果有人可以帮助我解决这个问题，我将不胜感激。

我的CSS代码:

html {
    height: 100%;
}
body {

    margin: 0;
    font-size: 12px !important;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;

    background-repeat:no-repeat;
    background-size:cover;

    background: rgba(183,222,237,1);
    background: -moz-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(183,222,237,1)), color-stop(51%, rgba(33,180,226,0.64)), color-stop(100%, rgba(183,222,237,0.3))) fixed;
    background: -webkit-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%);
    background: -o-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%);
    background: -ms-linear-gradient(top, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%);
    background: linear-gradient(to bottom, rgba(183,222,237,1) 0%, rgba(33,180,226,0.64) 51%, rgba(183,222,237,0.3) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b7deed', endColorstr='#b7deed', GradientType=0 );
}
.child-grid {
    background-color: rgb(255, 255, 255);
    margin: 10px 10px 10px 10px;
    padding:10px;
    resize:vertical;
    overflow:visible;
    overflow-y:scroll;
    border-radius: 5px;
    /* own property*/
    /*width: 95%;*/
    height: 300px;
    min-height: 250px;
    border: 1px solid lightgray;
}

Answer 1

将这一行添加到正文标签中:

background-attachment: fixed;

喜欢this

这应该行得通