Взаимодействие с фоном блокируется Div над фоном

Question

Я использую Particles.js на заднем плане. У меня есть слой div поверх холста, который содержит текст и изображения.

Этот div блокирует взаимодействие с фоном, убивающим опыт. Есть ли способ убедиться, что div позволяет взаимодействовать через него с фоном. Выше и ниже Div взаимодействий хорошо работают, поскольку контент вертикально центрирован.

Demo Link

Answer 1

Я вижу это CSS в вашем коде. (Линия нет. 19)

#hero-unit .particles-js-canvas-el { 
    z-index: -1 !important; 
} 

Изменить это

#hero-unit .particles-js-canvas-el { 
    z-index: 1 !important; 
} 

и

#hero-unit #hero-wrapper { 
    z-index: 1!important; 
} 

FIX, чтобы сделать взаимодействие через текст или рядом с ним

оберните divs отдельно друг от друга .col-md-9rows

<div class="row"> 
    <!-- first row --> 
    <div class="col-md-9"> 
     <img class="hero-logo hidden-xs" src="http://creo.mink7.com/wp-content/themes/creo/images/logo-home.png" alt=""> 
     <h1 class="head">Together we can Make a universe of smart innovations for a Better tomorrow</h1> 
    </div> 

    <!-- second row --> 
    <div class="col-md-9 newsletter"> 
     <div id="frontpage-mailchimp"> 
      <h4>Join the Community of Makers</h4> 

      <!-- MailChimp for WordPress v3.0.10 - https://wordpress.org/plugins/mailchimp-for-wp/ --> 
      <form id="mc4wp-form-1" class="mc4wp-form mc4wp-form-114" method="post" data-id="114" data-name="Join us in making things better"> 
       <!-- mailchimp stuffs --> 
      </form> 
     </div> 
    </div> 
</div> 

и, наконец, это CSS

#hero-wrapper .col-md-9{ 
     z-index: 1; // reduce the default z-index for div 
    } 

#hero-wrapper .col-md-9.newsletter{ 
    z-index: 9999; // increase the z-index for newletter div only 
}