如何让CSS动态背景固定，使页面内容可正常滚动？

要实现动态背景固定在页面、内容在上方滚动的效果，只需对.blur-container的CSS定位规则做调整，同时确保内容层级高于背景：

关键修改点 #

• 将.blur-container设置为固定定位（position: fixed），使其脱离文档流并始终固定在视口内
• 添加top: 0; left: 0;确保背景容器覆盖整个视口
• 设置z-index: -1让背景处于内容下方
• 合并重复的.blur-container样式规则，避免冲突

修改后的完整CSS代码 #

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: Black;
}

.shape {
  margin: 0 auto;
  aspect-ratio: 1;
  position: relative;
  --width: 100%;
  --scale: 1;
  --opacity: 0.66;
  --top: 0;
  --left:0;
  --path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
  --background: linear-gradient( hotpink, red, orange, yellow, hotpink);
  --offset: 0deg;
  --speed: 8000ms;
  clip-path: var(--path);
  background: var(--background);
  scale: var(--scale);
  opacity: var(--opacity);
  width: var(--width);
  top: var(--top);
  left: var(--left);
  rotate: var(--offset);
  mix-blend-mode: difference;
  animation: turn var(--speed) linear forwards infinite;
}

@keyframes turn {
  to {
    rotate: calc( var(--offset) + 1turn);
  }
}

.blur-container {
  --blur: 40px;
  filter: blur(var(--blur));
  height: 100vh;
  width: 100%;
  display: grid;
  overflow: hidden;
  /* 新增固定定位规则 */
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
  /* 保留原背景相关属性 */
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
}

.blur-container > * {
  grid-column: 1/-1;
  grid-row: 1/-1;
}

页面内容设置 #

如果你的页面有其他内容（比如文本、卡片等），只需给内容容器添加以下样式，确保它在背景上方：

.content {
  position: relative;
  z-index: 1;
  /* 可根据需求添加内边距等样式 */
  padding: 2rem;
  color: white;
}

然后在HTML中把内容放在.blur-container之外：

<div class="blur-container" style="--blur:12vw;">
  <!-- 形状元素保持不变 -->
  <div class="shape" style="--path:polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%);"></div>
  <div class="shape" style="--path:polygon(50.9% 37.2%, 43.5% 34.7%, 33.6% 26.1%, 39.2% 10.8%, 26.2% 0.0%, 4.8% 6.4%, 0.0% 30.4%, 20.7% 37.2%, 33.4% 26.3%, 43.2% 34.9%, 45.0% 35.6%, 43.6% 46.4%, 37.8% 59.5%, 21.8% 63.2%, 11.7% 76.1%, 22.9% 91.3%, 47.4% 91.3%, 54.0% 79.0%, 38.0% 59.6%, 43.9% 46.4%, 45.2% 35.5%, 50.9% 37.6%, 56.1% 36.8%, 59.8% 47.6%, 70.3% 61.9%, 87.7% 56.0%, 96.4% 37.4%, 88.6% 15.1%, 63.7% 16.7%, 55.2% 33.6%, 55.9% 36.6%, 50.9% 37.2%);
  --offset:180deg;
  --speed: 6000ms;
  --background: linear-gradient( cyan, blue, green, purple, cyan);
  "></div>
</div>

<!-- 页面内容 -->
<div class="content">
  <h1>我的页面内容</h1>
  <p>这里是可以滚动的内容...</p>
  <!-- 更多内容 -->
</div>

内容的提问来源于stack exchange，提问作者Dnlweijers