CSS如何显示页面背景色（渐变色）不滚动呢？为了使背景色固定在页面上，即在滚动内容时背景色不滚动，可以使用 CSS 的

为了使背景色固定在页面上，即在滚动内容时背景色不滚动，可以使用 CSS 的 background-attachment 属性设为 fixed。以下是修改后的完整示例代码：

HTML 部分：

1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>Gradient Background</title>
7    <link rel="stylesheet" href="styles.css">
8</head>
9<body>
10    <div class="content">
11        <!-- 这里是页面的内容 -->
12        <p>这是一个长内容的示例，用于测试滚动效果。</p>
13        <p>这是一个长内容的示例，用于测试滚动效果。</p>
14        <p>这是一个长内容的示例，用于测试滚动效果。</p>
15        <p>这是一个长内容的示例，用于测试滚动效果。</p>
16        <p>这是一个长内容的示例，用于测试滚动效果。</p>
17        <p>这是一个长内容的示例，用于测试滚动效果。</p>
18        <p>这是一个长内容的示例，用于测试滚动效果。</p>
19        <p>这是一个长内容的示例，用于测试滚动效果。</p>
20        <p>这是一个长内容的示例，用于测试滚动效果。</p>
21        <p>这是一个长内容的示例，用于测试滚动效果。</p>
22        <p>这是一个长内容的示例，用于测试滚动效果。</p>
23        <p>这是一个长内容的示例，用于测试滚动效果。</p>
24        <p>这是一个长内容的示例，用于测试滚动效果。</p>
25        <p>这是一个长内容的示例，用于测试滚动效果。</p>
26        <p>这是一个长内容的示例，用于测试滚动效果。</p>
27        <p>这是一个长内容的示例，用于测试滚动效果。</p>
28        <p>这是一个长内容的示例，用于测试滚动效果。</p>
29        <p>这是一个长内容的示例，用于测试滚动效果。</p>
30        <p>这是一个长内容的示例，用于测试滚动效果。</p>
31    </div>
32</body>
33</html>

CSS 部分（styles.css）：

body, html {
    height: 100%;
    margin: 0;
    background: linear-gradient(to bottom, 
        #FEDD12 0%, 
        #FCED8D 45%, 
        #F7F7F7 80%, 
        #F7F7F7 100%);
    background-attachment: fixed;
}

.content {
    padding: 20px;
}

解释：

在 body, html 选择器中设置高度为 100% 和取消默认的 margin，以确保背景色覆盖整个页面。
使用 background 属性定义背景渐变色。
使用 background-attachment: fixed; 来固定背景，使其在页面滚动时不会移动。
.content 类用于页面内容的样式，可以根据需要添加更多内容。

这样，当页面内容滚动时，背景色将保持固定，不会随着内容一起滚动。

替代方案（兼容性更佳的方案）

在某些情况下，background-attachment: fixed 可能在移动设备或某些浏览器中不完全兼容。如果你需要实现类似的效果，可以使用一个固定的 div 作为背景，然后在其上叠加另一个 div 作为内容。这是一种常见的替代方法，可以确保在所有设备和浏览器中具有一致的效果。

实现步骤

创建一个全屏固定的背景 div。
创建一个内容 div，将其叠加在背景 div 上。
使用 CSS 设置背景 div 和内容 div 的样式。

示例代码

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Background Example</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="fixed-background"></div>
    <div class="content">
        <h1>Content goes here</h1>
        <p>This is an example of using a fixed background div with content overlay.</p>
    </div>
</body>
</html>

CSS

/* 全屏固定背景 */
.fixed-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('path/to/your/background.jpg');
    background-size: cover;
    background-position: center;
    z-index: -1; /* 确保背景在内容后面 */
}

/* 内容容器 */
.content {
    position: relative;
    z-index: 1; /* 确保内容在背景上面 */
    padding: 20px;
    color: white;
    text-align: center;
}

解释

背景 div：使用 position: fixed 和 z-index: -1 确保背景 div 始终固定在视口，并且在内容 div 的后面。
- background-image：设置背景图像。
- background-size: cover：确保背景图像覆盖整个 div。
- background-position: center：确保背景图像居中。
内容 div：使用 position: relative 和 z-index: 1 确保内容 div 在背景 div 的上面。
- padding 和 color 用于设置内容的样式。