我曾在一个例子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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句