如何通过CSS根据元素与视口大小定位固定背景（无需JS）

需求 #

实现固定背景的顶部“可选区域”自动收缩：当页面内容占满或超出屏幕时，顶部区域（示例中的红线部分）逐渐隐藏；内容未超出时，该区域保持显示。

问题分析 #

原方案中使用body承载背景，尝试background-position-y: clamp(-10vh, calc(100% - 100vh), 0px)无效，原因是**background-position的百分比是背景图与容器的对齐偏移量，并非容器自身尺寸的百分比**，无法直接通过calc引用容器高度。

CSS替代方案 #

通过固定定位的伪元素承载背景，利用calc结合max()动态调整伪元素的top值，实现背景的偏移控制，完全无需JavaScript：

修改后的代码 #

body, div, html, p {
  padding: 0;
  margin: 0;
  border: 0;
}

body {
  width: 100%;
  min-width: 500px;
  min-height: 100vh;
  position: relative;
}

/* 用固定伪元素承载背景 */
body::before {
  content: '';
  position: fixed;
  top: max(-10vh, calc(100vh - 100%));
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(0deg, #0ff 86%, #0f0 93%, #f00 97%) center no-repeat;
  background-size: auto 200%;
  z-index: -1;
}

img {
  border: 1px solid #000;
  margin: 0 auto 0 auto;
  height: 70vh;
  display: block;
  cursor: pointer;
  transition: height 1s ease-in-out;
}

img.big {
  height: 90vh;
}

.inner {
  max-width: 80%;
  margin: 0 auto;
}

p {
  line-height: 11vh;
  font-size: 14px;
  text-align: center;
}

<div class="inner">
  <p>red and this first line should gradually disappear when the monkey sticks out at the bottom (click image to toggle size)</p>
  <img id="ape" src="https://www.shareicon.net/download/2016/08/18/813908_ape.svg" onclick="this.classList.toggle('big')">
</div>

方案原理 #

1. 固定定位的伪元素body::before作为独立背景容器，覆盖全屏且不随滚动移动
2. top: max(-10vh, calc(100vh - 100%))的逻辑：
   • 当页面内容高度≤100vh时，calc(100vh - 100%)结果≥0，max(-10vh, 正数)取0，背景保持原位，顶部红线显示
   • 当页面内容高度>100vh时，calc(100vh - 100%)为负数（内容超出屏幕的高度值），max(-10vh, 负数)取两者中较大值：最多向上偏移10vh，顶部红线逐渐隐藏，直到完全收缩

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