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

将此行添加到body标记：

background-attachment: fixed;

喜欢this

那应该有用

Answer 2

您似乎必须在背景属性后添加以下行：

background-repeat:no-repeat;

响应式背景与可调整大小的div内容

2 个答案: