如何实现固定在屏幕上、仅可见区域随页面滚动的图片效果？

该类类似窗户的滚动效果通常可以通过以下两种方案实现，适配不同的使用场景：

方案1：CSS背景图实现（最简便） #

核心依赖background-attachment: fixed属性，让背景图固定在视口位置，仅随容器的位置变化露出对应区域的背景内容，无需JS代码，兼容性极佳。

• 实现代码示例：

<!-- 承载效果的“窗户”容器 -->
<div class="window-bg"></div>
<!-- 额外页面内容，撑高页面触发滚动 -->
<div style="height: 1200px;">其他页面内容区域</div>

.window-bg {
  /* 定义“窗户”的尺寸，也就是图片可见区域的大小 */
  height: 500px;
  width: 100%;
  /* 背景图相关配置 */
  background-image: url("你的图片路径");
  background-size: cover;
  background-position: center;
  /* 核心属性：让背景图固定在视口，不随页面滚动位移 */
  background-attachment: fixed;
}

• 优缺点说明：代码量极少，适配所有主流浏览器；但仅适合纯展示场景，对图片做交互、动态修改的灵活性较低。

方案2：DOM元素实现（高灵活性） #

通过父容器做裁剪、子图片固定定位的逻辑实现，适合需要对图片做动画、事件绑定等复杂操作的场景。
原理：父容器作为“窗户”跟随页面滚动，仅展示内部固定定位图片的对应区域，超出部分自动裁剪。

• 实现代码示例：

<div class="window-container">
  <img src="你的图片路径" class="fixed-pic" alt="固定展示的图片">
</div>
<div style="height: 1200px;">其他页面内容区域</div>

.window-container {
  position: relative;
  /* 定义“窗户”的可见区域尺寸 */
  height: 500px;
  width: 100%;
  /* 核心属性：裁剪超出容器的图片内容 */
  overflow: hidden;
}
.fixed-pic {
  /* 核心属性：让图片固定在视口位置，不随页面滚动位移 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  /* 调整层级避免遮挡其他页面内容 */
  z-index: -1;
}

• 优缺点说明：灵活性极高，可对图片做任意样式修改、事件绑定、动画效果；需要注意调整z-index层级，避免和页面其他固定定位元素冲突。

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