来自 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

图像现在工作正常。这是我的演示的 link，我从你的 https://codepen.io/nirajtech/pen/jmKNpr

中分叉出来的

问题是您没有包含触发视差所需的两个 js 文件。第一个 jquery 第二个是 materialize.js

两个js的link如下：

https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js
https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js

记得先包含 jquery 然后再具体化，否则你会遇到问题。

Answer 2

这让我的形象出现了我检查了 chrome

文档中的演示

<div class="parallax"><img src="images/cow.jpg" style="transform: translate3d(-50%, 432.451px, 0px);opacity: 1;"></div>

Answer 3

我遇到了同样的问题，唯一的解决方法是添加一个 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>

这对我有用。

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

Parallax from Materialize no showing image

css

materialize

parallax