Question

我在后台使用Particles.js。我在画布上有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;
}

FIX通过文本或旁边的文本进行互动

将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相互作用被Div阻挡

1 个答案: