如何在Elementor及纯HTML/JS/CSS中实现背景图片滚动效果？

一、Elementor 实现步骤 #

1. 自带视差功能快速实现 #

Elementor内置了视差效果，无需额外代码即可完成基础需求：

• 新建/编辑页面，添加一个Section，在「布局」面板设置最小高度为 100vh（占满屏幕）
• 进入该Section的「样式」面板，选择「图片」作为背景，上传你的背景图
• 在背景设置中找到「视差」选项：
  • 选择「滚动」：背景随滚动移动，但速度比前景内容慢，对应演示中的基础视差效果
  • 选择「固定」：背景固定不动，前景内容滚动过上方，适合静态背景的滚动对比效果

2. 自定义CSS实现精准控制（解决你尝试的双div/粘性方案） #

如果内置效果不符合需求，可通过自定义类+CSS/JS实现：

第一步：给元素添加自定义类

选中目标Section/容器，进入「高级」面板，在「CSS类」输入框填写自定义类名（比如 custom-parallax-section，用连字符分隔，不要空格）。

第二步：编写自定义CSS

通过浏览器F12「检查元素」工具可查看Elementor默认类（比如Section默认类是 elementor-section，背景层是 elementor-background-overlay），避免样式冲突。示例代码：

/* 父容器：相对定位，溢出隐藏 */
.custom-parallax-section {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

/* 背景层：绝对定位，高度超出父容器，实现滚动偏移空间 */
.custom-parallax-section .elementor-background-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%; /* 高度设为父容器的1.5倍，可调整 */
  background-size: cover;
  background-position: center;
  z-index: -1;
}

第三步：粘性+双div方案的Elementor实现

• 添加一个Section，在「高级」面板开启「粘性」，设置触发条件为「顶部」
• 在Section内添加两个Column：
  • 第一个Column放背景图，添加自定义类 sticky-bg-col，设置绝对定位、全屏覆盖
  • 第二个Column放前景内容，设置相对定位，z-index设为1确保在背景上方
• 配套CSS+JS：

.sticky-bg-col {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.sticky-bg-col img {
  width: 100%;
  height: 150%;
  object-fit: cover;
}

window.addEventListener('scroll', () => {
  const scrollY = window.scrollY;
  const bgImg = document.querySelector('.sticky-bg-col img');
  bgImg.style.top = `-${scrollY * 0.5}px`; // 0.5是滚动速度系数，越小背景滚动越慢
});

二、纯HTML/JS/CSS实现方案 #

1. HTML结构 #

<div class="parallax-wrap">
  <!-- 背景层 -->
  <div class="parallax-bg"></div>
  <!-- 前景内容层 -->
  <div class="parallax-content">
    <h1>宠物护理中心</h1>
    <p>专业的宠物托管与护理服务</p>
  </div>
</div>
<!-- 下方滚动测试内容 -->
<div class="scroll-test">
  <p>滚动查看效果...</p>
  <!-- 重复添加内容让页面可滚动 -->
</div>

2. CSS样式 #

.parallax-wrap {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150%;
  background-image: url('你的背景图片路径');
  background-size: cover;
  background-position: center;
  z-index: -1;
}

.parallax-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  color: #fff;
  text-shadow: 0 0 8px rgba(0,0,0,0.6);
}

.scroll-test {
  padding: 40px;
  background: #f8f8f8;
  height: 1000px;
}

3. JavaScript控制滚动速度 #

window.addEventListener('scroll', () => {
  const scrollOffset = window.pageYOffset;
  const bgElement = document.querySelector('.parallax-bg');
  // 调整transform的Y轴偏移，系数0.5表示背景滚动速度为内容的一半，可自定义
  bgElement.style.transform = `translateY(${scrollOffset * 0.5}px)`;
});

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