背景图片全高

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

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

Answer 2

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

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 3

也尝试使用：

background-size: cover;

这将在滚动时保持静态。

背景图片全高

Background image full height

html

css

height

background

image