如何仅滚动.container内容而不移动<body>背景实现glass morphism效果

云原生阿岚

2026-10-2

玻璃态页面背景固定滚动解决方案

问题根因

你之前设置background-attachment: fixed不生效的原因是该属性加在了绝对定位的伪元素上：伪元素本身position: absolute，高度仅为初始视口高度，页面滚动时伪元素会跟着内容整体上移，就算背景本身固定，元素移动也会导致背景跟着走。

解决方案

只要修改几行CSS即可实现需求，修改点如下：

给html和body添加基础重置样式，保证占满视口
将body::before和body::after的定位方式从absolute改为fixed，让伪元素整体固定在视口层，不受滚动影响
修正container背景色的错误数值（rgba参数最大值为255，原代码的355为笔误）

修改后完整CSS代码如下：

/* 新增html和body的基础样式 */
html, body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
}
body {
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: flex-start;
  background: #091921;
}

body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#e91e63, #ffc107);
  clip-path: circle(22% at 30% 20%);
  z-index: -1;
}

body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(#ffffff, #da00ff);
  clip-path: circle(20% at 70% 90%);
  z-index: -1;
}

.container {
  margin: 50px 0;
  width: 60%;
  padding: 20px 40px;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  color: white;
  font-size: 20px;
}