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

我试图在Div背景图像和Div的其他内容之间显示画布，特别是画布

因此，会有一个背景图像，然后是Granim.js画布，上面的不透明度被调低，然后是文本、图库、按钮等等

以下是我正在使用的Div的代码：

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

下面是添加画布的代码：

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

##如何使用
```html
var GraniInstance=新Granim({
元素：“#granim画布”，
姓名：“格拉尼姆”，
不透明度：[0.7,0.7]，
国家：{
“默认状态”：{
梯度：[
[#834D9B'，#D04ED6']，
['#1CD8D2'，'#93EDC7']
]
}
}
});

你想让画布成为一切的基础吗？添加一个

float:left

，它不会占用任何空间。或者，像这样：

（可能是相对的，我忘了）@Artyer我想在最后面有一个图像，前面是画布，然后在最前面是普通的div内容（文本、按钮等）。js是一个动画渐变画布。我认为在背景图像前面设置动画会很酷。你想在其他一切后面设置画布吗？添加一个

float:left

，它不会占用任何空间。或者，像这样：

（可能是相对的，我忘了）@Artyer我想在最后面有一个图像，前面是画布，然后在最前面是普通的div内容（文本、按钮等）。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>