在div背景图像和div内容的其余部分之间显示画布

Question

我试图在Div背景图片和Div的其他内容之间显示画布，特别是Granim.js画布。

所以，会有一个背景图片，然后是Granim.js画布，不透明度在其上面调低，然后是文本，图库，按钮等。

以下是Div I使用的代码：

    <section class="bg-image" id="portfolio">
        <div class="container-fluid">
            <div class="row no-gutter">
                <div class="container" id="carousel">
                    <div class="row">
                        <div class="col-lg-8 col-lg-offset-2 text-center">
                            <h2 class="section-heading">Portfolio</h2>
                            <hr class="light">
                            <p>Take a look at my portfolio on Béhance!<br>It contains my freelance projects as well as some of the work I did for X and Y.</p>                              

                            <!-- Carousel Card -->
                            <div class="card card-raised card-carousel">
                                <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
                                    <div class="carousel slide" data-ride="carousel">

                                        <!-- Indicators -->
                                        <ol class="carousel-indicators">
                                            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
                                            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
                                            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
                                        </ol>

                                        <!-- Wrapper for slides -->
                                        <div class="carousel-inner">
                                            <div class="item active">
                                                <img src="img/gallery/bg2.jpeg" alt="Awesome Image">
                                                <div class="carousel-caption">
                                                    <h4>UI/UX Design for Web & Mobile</h4>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <img src="img/gallery/bg3.jpeg" alt="Awesome Image">
                                                <div class="carousel-caption">
                                                    <h4>Online Advertising</h4>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <img src="img/gallery/bg4.jpeg" alt="Awesome Image">
                                                <div class="carousel-caption">
                                                    <h4>Corporate Identity & Branding</h4>
                                                </div>
                                            </div>
                                        </div>

                                        <!-- Controls -->
                                        <a class="left carousel-control" href="#carousel-example-generic" data-slide="prev">
                                            <i class="material-icons">keyboard_arrow_left</i>
                                        </a>
                                        <a class="right carousel-control" href="#carousel-example-generic" data-slide="next">
                                            <i class="material-icons">keyboard_arrow_right</i>
                                        </a>
                                    </div>
                                </div>
                            </div>
                            <!-- End Carousel Card -->

                            <hr class="invis">
                            <a href="https://www.behance.net/" target="_blank" class="btn btn-primary btn-xl page-scroll">Visit Portfolio</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
     </section>

带有bg图像的div的CSS：

.bg-image {
    color: #fff;
    background-image: url(../img/portfolio_bg2.jpg);
    background-position: center;
}

以下是添加画布的代码：

<canvas id="granim-canvas"></canvas>

画布确实在页面的其他地方孤立工作，所以那里没有问题。它只是按照我想要的方式分层问题。

这里是Granim.js画布的代码，以防它有用：

## How to use
```html
<!-- Create a <canvas> element -->
<canvas id="granim-canvas"></canvas>

<!-- Call the script -->
<script src="granim.min.js"></script>

<!-- Create a Granim instance -->
<script>
var granimInstance = new Granim({
   element: '#granim-canvas',
   name: 'granim',
   opacity: [0.7, 0.7],
   states : {
       "default-state": {
           gradients: [
               ['#834D9B', '#D04ED6'],
               ['#1CD8D2', '#93EDC7']
           ]
       }
   }
});
</script>