Question

我无法将画布设置为背景元素。目前，画布与标题标签分开，如示例中所示。 *画布#myCanvas也是由javascript生成的。我尝试过使用z-index但是没有用。这是jsbin链接。 http://jsbin.com/zikisu/1/

#myCanvas{
height: 400px;
width: 100%;
padding: 0px; z-index: -1; }
#mainTitle{
  z-index: 2;
}

h1 {

        color: #662d86;
}

#triangles{
    height: 400px;
    padding: 0px;
    background: -moz-element(#myCanvas);
}

#output{
    height: 400px;
}
<body>
  <div class="container" id="triangles">
                <div id="output">
                    <div id="mainTitle" class="row">
                        <div class="col-med-12 text-center">
                            <h1>Innovation
                            </h1>
                        </div>
                    </div>  
                </div>
            </div>  
</body>

Answer 1

没有办法“将画布设置为背景”，因为在HTML / CSS中，只有颜色和图像可以是背景。

如果您希望canvas元素的效果显示为背景，只需：

将<canvas>放在DOM根目录上（即使其成为<body>的孩子）
将任何其他元素放在它旁边（即，也作为<body>的孩子）
使用CSS将其他元素定位在canvas元素的顶部

通过将所有其他元素放入单个<div>容器中，可能更容易做到＃2和＃3。换句话说：

<body>
    <canvas></canvas>
    <div id="container">
        <!-- put the rest of your page here -->
    </div>
</body>

这样你只需要设置<div id="container">样式。

Answer 2

有很多代码要经过，但作为一个开始：尝试调整CSS，以便将画布视为 fixed 元素（浏览器也可以给它一个单独的位图，所以表现也好一点）：

#myCanvas{
    position: fixed;
    left: 0;
    top: 0;
    height: 400px;
    width: 100%;
    z-index: -1; 
}

将画布设置为背景

2 个答案: