在网页设计中，有时候我们希望背景图像或颜色随着内容的滚动而保持静止，而网页本身却可以滚动。这种效果可以让网页看起来更加美观和专业化。HTML5 提供了一种简单的方法来实现背景的固定效果，而无需额外的 CSS 扩展或JavaScript。
基础知识
首先，让我们回顾一下 CSS 中设置背景的一些基本知识：
background-color
: 设置元素的背景颜色。
background-image
: 设置元素的背景图片。
background-repeat
: 设置背景图像的重复方式。
background-position
: 设置背景图像的初始位置。
设置固定背景
要使背景图像或颜色在页面滚动时保持固定，我们需要用到
background-attachment
属性。这个属性可以接受以下值：
scroll
: 背景随内容滚动。
fixed
: 背景固定在视口中。
将
background-attachment
设置为
fixed
是我们想要实现的效果。
示例代码
下面是一个简单的示例，演示如何将页面背景设置为固定的颜色或图片。
这是一个具有固定背景的文本区域。
页面内容…此处内容会滚动…
在上面的示例中，
.fixed-background
类应用了一个固定的背景图片，而
.header
类则保持了背景的固定效果，尽管整个页面可以滚动。
注意事项
使用固定背景时，应考虑图像的大小和分辨率。较大的图像可能会对页面性能产生负面影响。
固定背景的元素需要足够的高度或内容才能使其下的滚动条正常工作。
部分用户可能会关闭图像显示，这可能会影响固定背景的效果。
通过使用这些简单的 CSS 属性，你可以轻松地创建一个具有吸引力的固定背景效果，让你的网页更加专业和美观。