Question

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

的GIF

<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

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

也可以尝试使用：

background-size: cover;

滚动时会保持静态。

Answer 3

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

背景图像全高

3 个答案: