OpenCart HTML模块：实现背景透明文字不透明的平移背景<div>

我来帮你完善这个适配OpenCart模块的实现，核心要解决样式独立封装、背景透明平移、文字不透明这三个需求，下面是完整的可直接使用的代码：

<div class="custom-scrolling-bg-module">
  <div class="module-text-content">
    <!-- 这里替换成你的模块文字内容 -->
    <h4>模块标题</h4>
    <p>这里是模块的正文内容，文字会保持完全不透明，不会受背景透明度影响</p>
  </div>
</div>

<style>
/* 用唯一类名做样式隔离，完全不干扰OpenCart全局样式 */
.custom-scrolling-bg-module {
  position: relative;
  overflow: hidden;
  /* 根据你的模块需求设置宽高，这里用自适应宽+固定最小高度示例 */
  width: 100%;
  min-height: 220px;
  padding: 2.5rem;
  /* 可选：加个兜底背景，防止背景图加载延迟时的空白 */
  background-color: rgba(245,245,245,0.9);
}

/* 用伪元素单独承载背景，实现透明+平移，完全不影响文字 */
.custom-scrolling-bg-module::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%; /* 宽度设为200%，避免平移时露出空白区域 */
  height: 100%;
  background: url('你的背景图片地址') center/cover no-repeat;
  opacity: 0.25; /* 这里控制背景的透明度，数值越小越淡 */
  z-index: 0;
  animation: backgroundScroll 22s ease-in-out infinite; /* 22s是动画总时长，可按需调整 */
}

/* 文字内容层，设置更高层级保证不透明 */
.custom-scrolling-bg-module .module-text-content {
  position: relative;
  z-index: 1;
  color: #2d2d2d; /* 文字颜色，根据你的页面风格调整 */
}

/* 优化你的关键帧动画，保留边缘暂停的逻辑 */
@keyframes backgroundScroll {
  0% { background-position: 50% 50%; }
  33% { background-position: 0% 50%; }
  40% { background-position: 0% 50%; } /* 左侧停留 */
  66% { background-position: 100% 50%; }
  75% { background-position: 100% 50%; } /* 右侧停留 */
  100% { background-position: 50% 50%; }
}
</style>

关键细节说明： #

• 样式完全隔离：用唯一类名.custom-scrolling-bg-module包裹所有样式，确保不会和OpenCart默认样式、其他模块样式冲突。
• 背景与文字分离：通过伪元素::before单独实现背景层，文字放在独立的子容器里并设置更高的z-index，完美实现背景透明但文字不透明的效果。
• 动画适配优化：把背景宽度设为200%，避免平移过程中出现空白；调整动画时长可以控制平移速度，ease-in-out让动画过渡更自然。
• 适配OpenCart模块：直接把这段代码粘贴到OpenCart的HTML模块编辑器中即可，不需要额外引入外部CSS文件，完全自包含。

如果需要调整背景透明度、动画速度或者容器尺寸，只需要修改对应的CSS属性就可以啦。

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