背景图片全高

Question

所以我的问题是，如果我向下滚动背景图像，则在某个时候随机消失并开始显示背景颜色。 这是GIF来解释https://gyazo.com/d2d742a1ff1225babe04faa0a597ada9

<body>
    <div class="taust">
    </div>
    <div class="randomcontent">
    <h1>random content</h1>
    </div>


    </body>

.taust{
    top:0;
      background-image: url(taust.jpg);
      background-repeat:repeat-x;
    background-attachment:fixed;
    background-position: left top;
    position:absolute;
      overflow:auto;
          z-index:-5;
    min-width:100%;
    height:100vh;
    margin:0;
}
.randomcontent{
    width:80%;
    height:2000px;
    right:0; left:0;
    margin:auto;
    border:solid 2px blue;
    background:red;
    text-align:center;

}
.randomcontent h1{
    font-size:100px;
}

Answer 1

这将产生相同的输出，但外观更清晰。

 body{ margin: 0; } .taust{ background: url(taust.jpg) no-repeat center center fixed; background-size: cover; background: blue; /* Delete this line when you paste this code */ } .randomcontent{ width:80%; height:2000px; margin:auto; border:solid 2px blue; background:red; text-align:center; } .randomcontent h1{ font-size:100px; } 

 <div class="taust"> <div class="randomcontent"> <h1>random content</h1> </div> </div> 

Answer 2

还可以尝试使用：

background-size: cover;

这将在滚动时保持静态。

Answer 3

使用position: fixed; 代替position: absolute;