无需JS实现仅透背景、遮挡文字的透明粘性元素？

需求：页面带有背景图，半透明的粘性头部/底部元素仅透出页面背景，而非下方的正文文本；现有JavaScript实现方案，希望替换为纯HTML/CSS方案。

实现思路 #

利用CSS滚动驱动动画（Scroll-Driven Animations）自动跟踪滚动位置，动态裁剪正文内容，让粘性元素覆盖区域的文本被隐藏，仅透出页面的固定背景。全程无需JavaScript，依赖现代浏览器的原生CSS支持。

调整后的HTML结构 #

将article内的正文内容单独封装到容器中，方便统一控制裁剪：

<html>
<head>
</head>
<body>
  <header>
    <p>…</p>
  </header>
  <article>
    <header class="sticky-top">Should be sticky, but clip text</header>
    <div class="content-wrap">
      <p>…</p>
      <p>…</p>
      <p>…</p>
    </div>
    <footer class="sticky-bottom">This should be at the bottom</footer>
  </article>
</body>
</html>

纯CSS代码实现 #

* { margin: 0; padding: 0; }

body {
  font-family: arial;
  text-align: justify;
  background: url(…); /* 替换为你的页面背景图 */
  color: #fff;
  background-size: cover;
  background-attachment: fixed; /* 固定背景，确保粘性元素透出的是页面背景 */
}

article {
  position: relative;
  min-height: 100vh;
}

/* 粘性头部 */
.sticky-top {
  background: #c8f8;
  position: sticky;
  height: 2rem;
  top: 0;
  z-index: 1; /* 确保头部在内容上方 */
}

/* 粘性底部 */
.sticky-bottom {
  background: #cf88;
  position: sticky;
  bottom: 0;
  z-index: 1; /* 确保底部在内容上方 */
}

/* 正文容器，用于裁剪 */
.content-wrap {
  position: relative;
  z-index: 0;
  /* 绑定动画到页面垂直滚动 */
  animation: clip-content linear;
  animation-timeline: scroll(root block);
}

/* 动态裁剪逻辑：滚动时隐藏粘性元素覆盖的区域 */
@keyframes clip-content {
  0% {
    clip-path: inset(0 0 0 0); /* 初始状态不裁剪 */
  }
  100% {
    clip-path: inset(2rem 0 2rem 0); /* 滚动到底部时，裁剪掉头部和底部的高度区域 */
  }
}

/* 可选：给正文添加内边距，避免文本紧贴边缘 */
.content-wrap p {
  padding: 1rem;
}

原理拆解 #

1. 固定背景：background-attachment: fixed让页面背景不随滚动移动，粘性元素的半透明背景会直接透出这个固定背景，而非滚动的正文内容。
2. 滚动驱动动画：animation-timeline: scroll(root block)将裁剪动画绑定到页面的垂直滚动进度，无需JS就能自动计算滚动偏移。
3. 内容裁剪：通过clip-path的inset值动态调整，滚动时自动隐藏被粘性头部/底部覆盖的正文区域，达到仅透出背景的效果。

兼容性 #

该方案支持Chrome、Edge、Safari 16.4+、Firefox 115+等现代浏览器；如需兼容旧版浏览器，建议保留原JavaScript方案作为回退。

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