与背景的交互被 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;
}

修复通过文本或旁边的文本进行交互

将 div 包装在单独的 .col-md-9 rows

<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
 }