Materialized Parallax组件异常：添加类后图片不显示，移除则无效果

Hey there, let's get to the bottom of why your parallax image isn't showing up when the parallax class is applied! Based on your code and the behavior you described, here are the most common fixes to try:

1. Make sure you've loaded all required dependencies #

Your markup looks like it's using Materialize CSS's parallax component, which relies on jQuery and Materialize's own JS/CSS files. If these aren't loaded correctly, the parallax script won't work, and it might hide the image unexpectedly.

Double-check that you've included these in your <head> section (in this order):

• jQuery library
• Materialize CSS
• Materialize JavaScript

2. Don't forget to initialize the parallax component #

Materialize's parallax won't work out of the box—you need to trigger its initialization once the DOM is fully loaded. Add this script at the end of your <body> (or wrap it in a DOM-ready handler):

$(document).ready(function(){
  $('.parallax').parallax();
});

This tells the library to apply the parallax effect to your .parallax element, which also ensures the image is rendered correctly.

3. Ensure your parallax container has enough height #

By default, Materialize's .parallax-container might not have a set height, which can cause the image to be hidden or cut off. Add some custom CSS to give it a minimum height:

.parallax-container {
  min-height: 300px; /* Adjust this value to fit your design */
  height: auto;
}

This gives the container enough space to display the parallax image.

4. Verify no conflicting CSS is hiding the image #

Use your browser's developer tools (F12) to inspect the .parallax element. Check if any styles (like display: none, opacity: 0, or overflow: hidden) are accidentally hiding the image. Sometimes custom styles or other CSS libraries can override Materialize's default parallax styles.

5. Confirm your image path is correct (just to be safe) #

You mentioned the image shows up when you remove the parallax class, so this is less likely—but it doesn't hurt to double-check. Ensure the src attribute points to the correct relative or absolute path of your wood.jpg file.

Example Working Code #

Here's how your full markup should look with all fixes applied:

<head>
  <!-- Materialize CSS -->
  <link rel="stylesheet" href="path/to/materialize.min.css">
  <!-- jQuery -->
  <script src="path/to/jquery.min.js"></script>
  <!-- Materialize JS -->
  <script src="path/to/materialize.min.js"></script>
  
  <style>
    .parallax-container {
      min-height: 300px;
      height: auto;
    }
  </style>
</head>
<body>
  <div class="parallax-container">
    <div class="parallax"><img src="content/img/wood.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 th...</p>
    </div>
  </div>

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

Start with the initialization step first—it's the most common culprit for this issue!

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