后台交互被 Div 阻止

Question

我在后台使用 Particles.js。我在包含文本和图像的 canvas 上有 div 层。

这 div 阻止了与后台的交互，从而破坏了体验。有没有办法确保 div 允许通过它与背景进行交互。 Div 上方和下方的交互效果很好，因为内容是垂直居中的。

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
 }

后台交互被 Div 阻止

Interactions with Background being blocked by Div over the background

javascript

css

jquery

z-index

particles.js