Welcome To Ask or Share your Answers For Others

javascript - Contents overlaying the image while scrolling

Welcome To Ask or Share your Answers For Others

1 Reply

replyed Jan 31, 2022 by 深蓝 (71.8m points)

You can use the background-attachment:fixed CSS property to achieve this. A very quick demonstration can be seen below:

html,
body {
  margin: 0;
  padding: 0;
}
html {
  background: url(http://lorempixel.com/800/600);
  background-attachment: fixed; /*This stops the image scrolling*/
}
body {
  min-height: 100vh;
  margin-top: calc(100vh - 100px);/*Only 100px of screen visible*/
  background: lightgray;/*Set a background*/
}

<body>Some text that will scroll</body>

与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…

...