[分享]css内容滚动背景不滚

CSS中的内容滚动可以让页面的内容在一定区域内滚动，这对于展示大量内容、节约页面空间非常有用，但有时候我们也希望背景不随着内容一起滚动，下面就让我来介绍如何实现这样的效果。首先，我们需要将页面的背景固...

CSS中的内容滚动可以让页面的内容在一定区域内滚动，这对于展示大量内容、节约页面空间非常有用，但有时候我们也希望背景不随着内容一起滚动，下面就让我来介绍如何实现这样的效果。

首先，我们需要将页面的背景固定不动。这可以通过以下CSS代码来实现：

body {
  background: url(background-image.png) no-repeat center center fixed;
  background-size: cover;
} 

以上代码中，背景图片被设为居中并固定不动，而且占满整个页面。这样，即使页面内容滚动，背景也不会跟着滚动。

接下来，我们需要让页面的内容滚动。这可以使用以下CSS代码来实现：

.content {
  overflow-y: scroll;
  height: 300px;
} 

以上代码中，.content是一个容器，通过设置它的高度和overflow-y属性为scroll，可以让它内部的内容出现纵向滚动条。这样即使页面内容过多，页面也不会因此被撑开。

通过以上两种方式，我们就成功实现了内容滚动背景不滚的效果。如果你想让横向滚动也出现，只需要将overflow-y改成overflow。