css - 来自 Materialise 的视差没有显示图像

Question

我正在使用 Materialize CSS 并尝试使用 Parallax。

我按照说明操作:http://materializecss.com/parallax.html

但是当我保存时，没有图像显示。

这是代码笔:https://codepen.io/wecarrasco/pen/qmxMox

    <div class="parallax-container">
    <div class="parallax"><img src="http://www.mrwallpaper.com/wallpapers/landscape-georgia.jpg"></div>
  </div>
  <div class="section white">
    <div class="row container">
      <h2 class="header">Parallax</h2>
      <p class="grey-text text-darken-3 lighten-3">Parallax is an effect where the background content or image in this case, is moved at a different speed than the foreground content while scrolling.</p>
    </div>
  </div>
  <div class="parallax-container">
    <div class="parallax"><img src="\wecarrasco.github.io/computer.jpg"></div>
  </div>

和脚本:

<script>
    $(document).ready(function(){
      $('.parallax').parallax();
    });
</script>

谢谢!

Answer 1

我遇到了同样的问题，唯一的解决方法是添加一个 z-index: X;，其中 X 比环绕 div 高元素 z-index 所以我将 15 设置为视差 div，所以我的最终 div 是这样的

<div class="parallax-container">
    <div class="parallax" style="z-index: 15;">
        <img src="img/profile2.jpg">
    </div>
</div>

这对我有用。