Question

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

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

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

以下是codepen：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高一个数字，所以我将其设置为{{1 }}到视差div，所以我的整理div是这个

为我工作的人。

Answer 2

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

分叉

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

两个js的链接如下：

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 3

这使我的图像出现我检查了chrome文档中的演示

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

Materialise中的视差没有显示图像

3 个答案: