如何在滚动时使背景图像静止？

Question

我是 html 和 CSS 的初学者，我试图通过添加背景图像来修改我的旧项目，我希望图像在我保持静止的同时占据屏幕大小向上或向下滚动这是我的代码

'''

body {
  background-image:    url(https://lh3.googleusercontent.com/3WHvvnFSspZKbbRkM9SgvIUMDs6efWS5vXgmSglvoHASfV4TUhIFSXd77Ic9x02zAmyrMwpg-py0YceJYVLLCK9SpU9YQU56rm-uTBKb2KoTW3dnjpgVLvhJ26koIF-VXlzao11v=w2400);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

h1, h2 {
  text-align: center;
}

.catphoto {
  text-align : center;
}

'''

Answer 1

您可以使用 CSS 中的 background-attachment 属性来做到这一点。

示例：

body {
  background-image: url(https://picsum.photos/1080/1920);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  
  background-attachment: fixed;
  
  height: 300vh;
}

.cover {
  background-color: aqua;
  height: 50vh;
  margin-top: 90vh;
  padding: 20px;
}

<div class="cover">
  (covering up so you can see the effect)
</div>

这会将背景的位置固定到特定位置，例如将其 position 设置为 fixed 的元素。通过在 CSS.

中添加一行，可以轻松将其移植到您的代码中

background-attachment: fixed;

有关 background-attachment 的更多信息：MDN web.dev

如何在滚动时使背景图像静止？

How do I make the background image still while scrolling?

html

css