如何让Pure CSS Parallax Pixel Stars效果不超出动态页脚显示范围

可行解决方案汇总 #

方案1：纯CSS容器限制（无JS，优先推荐）

• 将原全局挂载的星星容器从body根节点迁移到页脚之前的主内容包裹容器内
• 给主内容容器添加position: relative和overflow: hidden属性，星星容器的定位从原有的fixed改为absolute，设置inset: 0让其撑满整个主内容容器，此时星星的渲染范围会被父容器完全限制，不会溢出到页脚区域
• 若原效果用background-attachment: fixed实现视差，替换为perspective + translateZ结构即可保证视差效果正常且不溢出，参考代码：

/* 主内容包裹容器 */
.main-wrapper {
  position: relative;
  overflow: hidden;
  perspective: 1px;
  perspective-origin: center top;
}
/* 星星容器 */
.stars-parallax {
  position: absolute;
  inset: 0;
  transform: translateZ(-5px) scale(6); /* 调整数值控制视差滚动速率 */
  z-index: -1;
  /* 原有星星的背景、渐变等样式直接保留即可 */
  background: #0b0f1a radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px) repeat top center;
}

方案2：JS动态同步高度（适合不想改动原有CSS结构的场景）

• 用ResizeObserver监听主内容区域的高度变化，实时同步给星星容器，保证星星容器的高度永远等于页脚以上的主内容高度，不会超出范围，参考代码：

const mainContent = document.querySelector('.main-wrapper')
const starsContainer = document.querySelector('.stars-parallax')

// 监听主内容尺寸变化，自动同步星星容器高度
const heightObserver = new ResizeObserver(entries => {
  starsContainer.style.height = `${entries[0].contentRect.height}px`
})
heightObserver.observe(mainContent)

• 如需兼容低版本浏览器，可以在所有触发页面高度变化的业务逻辑（如内容加载、tab切换、用户点击展开操作）的回调末尾，手动执行一次高度同步即可。

方案3：Grid布局层隔离

• 用CSS Grid把整个页面拆成主内容、页脚两个独立行，星星容器直接绑定在主内容对应的网格行，利用Grid的布局特性自动限制渲染范围，参考代码：

body {
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto; /* 第一行自适应内容高度，第二行适配页脚高度 */
  grid-template-columns: 100%;
}
.stars-parallax {
  grid-area: 1 / 1 / 2 / 2;
  z-index: -1;
  /* 原有星星样式保留 */
}
.main-wrapper {
  grid-area: 1 / 1 / 2 / 2;
}
footer {
  grid-area: 2 / 1 / 3 / 2;
}

该方案无需额外JS，也不需要调整星星的定位属性，适配所有动态高度场景。

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