如何在滚动时固定背景 - CSS

在 CSS 中，通过 background-attachment 属性可以设置背景图片的滚动效果。默认值为 scroll，表示背景随着页面滚动而滚动；设置为 fixed 则表示背景固定不动，即使页面滚动了也不会变化。在这里，我们将介绍如何在滚动时固定背景。

HTML

首先，我们需要一个 HTML 文件。这个文件只需要包含一个容器，其中我们的背景将被设置：

<div class="bg-container">
  <!-- Content goes here -->
</div>

CSS

接下来，我们需要为这个容器创建样式。我们需要设置以下属性：

• background-image：背景图片的 URL。
• background-size：背景图片的大小。
• background-attachment：背景滚动效果的设置。

这里，我们将设置为 fixed：

.bg-container {
  background-image: url('image.jpg');
  background-size: cover;
  background-attachment: fixed;
}

测试

现在，我们的背景已被设置为固定的。在滚动页面时，背景不会跟随滚动而移动。

总结

通过设置 background-attachment 属性为 fixed，我们可以在滚动时固定背景。这对于创建视觉效果非常有用，例如创建一个固定的背景图片、视频或其他类型的媒体。