滚动背景搭配固定内容：如何仅滚动固定容器内图片或元素背景图？

当然可以啦！这两种需求都能通过CSS（配合一点点JS就能实现更灵活的效果）搞定，我给你一步步拆解：

一、在固定容器中仅滚动图片 #

核心思路是：把图片放在一个固定尺寸的子容器里，给这个子容器开启滚动属性，同时让容器内的其他内容（比如你的.content导航栏）固定在容器上方，这样滚动子容器时只有图片会动，其他内容完全不受影响。

基于你提供的代码，我调整出了可运行的示例：

body { margin: 0; }
.header { 
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 40px; 
  overflow: hidden; /* 外层容器隐藏溢出，只让内部图片容器滚动 */
  background-color: white; 
}
.header .image { 
  width: 100%;
  height: 100%;
  overflow-y: auto; /* 允许垂直滚动，需要的话也可以用overflow-x控制水平 */
}
.header .image img { 
  transform: scale(1.03); 
  opacity: 0.5; 
  filter: blur(5px); 
  width: 100%;
  height: 200px; /* 让图片高度大于外层容器，产生滚动空间 */
}
.header .content { 
  position: absolute; 
  top: 0; 
  left: 0; 
  height: 100%; 
  width: 100%; 
  z-index: 100; 
  /* 给内容加个样式，方便看效果 */
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  font-size: 14px;
}

关键细节： #

• 给.image容器设置overflow-y: auto，当图片高度超过容器时就会出现滚动条；
• .content用position: absolute和高z-index固定在容器最上层，滚动图片时它会保持不动；
• 图片高度要设置得比外层.header的40px高，这样才会有滚动的空间。

二、仅滚动某个元素的背景图片 #

这种需求分两种场景，我都给你整理了方案：

场景1：背景图自动滚动（不需要用户操作） #

用CSS动画就能实现，让背景图在元素内部自动滚动，元素本身保持静止：

.scroll-bg-element {
  width: 300px;
  height: 200px;
  background-image: url('你的图片路径');
  background-size: cover; /* 让背景图适配元素尺寸 */
  animation: scrollBackground 12s linear infinite; /* 12秒滚动一次，循环播放 */
}

/* 定义滚动动画 */
@keyframes scrollBackground {
  0% { background-position: 0 0; }
  100% { background-position: 0 -100%; } /* 垂直滚动，要水平滚动就改第一个值 */
}

场景2：随页面滚动控制背景图滚动 #

如果想要背景图跟着页面滚动节奏动，就需要一点点JS来监听滚动事件，动态调整背景位置：

<div class="scroll-on-page"></div>

<script>
const bgElement = document.querySelector('.scroll-on-page');
window.addEventListener('scroll', () => {
  const scrollDistance = window.scrollY;
  // 调整0.5这个系数可以改变背景滚动速度，越大滚得越快
  bgElement.style.backgroundPositionY = `${scrollDistance * 0.5}px`;
});
</script>

<style>
.scroll-on-page {
  width: 100%;
  height: 500px;
  background-image: url('你的图片路径');
  background-size: cover;
  background-attachment: scroll; /* 不要用fixed，否则背景会相对于视口定位 */
}
</style>

这样设置后，当你滚动页面时，元素本身不动，但背景图会跟着缓慢滚动，营造出视差效果~

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