能否通过Rellax.js调用元素::before伪类实现视差效果？

核心结论 #

没法直接用CSS伪类（比如::before）作为Rellax.js的目标元素——伪元素是CSS渲染阶段生成的，根本不存在于DOM结构中，JavaScript没法直接选中或操作它们，这就是你看到控制台报错的原因。

替代方案 #

把原本用::before实现的叠加背景，换成一个真实的DOM子元素，再将这个子元素设为Rellax的目标即可：

修改后的HTML代码 #

<div class="right bttk-cta-bg" style="background:url(/wp-content/uploads/2022/11/Arrow-Down-BG.png) repeat; background-position: top left"> 
    <div class="bttk-cta-overlay"></div>
    <!-- 原有的内容放在这里 -->
</div>

修改后的CSS代码 #

.bttk-cta-bg {
  position: relative; /* 让子元素的绝对定位以父容器为基准 */
}
.bttk-cta-overlay {
  background: url(/wp-content/uploads/2022/11/up-arrows.png);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%; /* 铺满整个父容器 */
  height: 100%;
}

修改后的Rellax.js代码 #

<script>
  var rellax = new Rellax('.bttk-cta-overlay', {
    speed: -2,
    center: false,
    wrapper: null,
    round: true,
    vertical: true,
    horizontal: false
  });
</script>

注意事项 #

• 必须给父容器.bttk-cta-bg添加position: relative，否则子元素的绝对定位会以整个页面为基准，无法铺满父容器。
• 该方案完全替代伪元素的叠加效果，同时真实DOM元素能被Rellax正常识别，实现你需要的视差效果。

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