Question

我有一个网页，我正在尝试将一个画布放在一组div标签中。但是我需要画布位于div上方图像上方/图层上方。无论我尝试什么或放置画布html线，我都无法使用画布来显示div1中的图像。

首先我定义div类的样式。

#div1 {width:100%; background:transparent url(img/header-bg.png) no-repeat; height:400px; position:relative;}
#div2 {width:100%; background:transparent url(img/nav-bg.png) repeat-x;}
#div3 {
height:450px;
width:100%;
position:absolute; 
background:transparent url(animation/SampleAnim_0010000.png) no-repeat 80% 0; 
}

#div4 {
height:390px; 
width:100%; 
border-bottom:10px solid rgba(255, 255, 255, 0.5);
}

然后是我的HTML

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">             

            </div><!--div4-->

        </div><!--div3-->
    </div><!--div2-->
</div><!--div1-->

无论我在divs中插入什么

<canvas id="canvas" width="500" height="220"></canvas>

在id = div1（img / header-bg.png）中设置的图像与画布重叠。 div2，div3和div4正确重叠div1。我怎么能用画布做到这一点？

我的画布脚本看起来像

<script>

var canvas = document.getElementById('canvas');
if(canvas.getContext){
    // canvas animation code here:
    var ctx = canvas.getContext('2d');

    var lhs = new Image();

    lhs.src = "animation/SampleAnim_0010000.png";

        ctx.drawImage(lhs, 0, 0);

非常感谢任何帮助。

Answer 1

似乎对我有用：http://jsfiddle.net/RnEc6/1/

<div id="div1">
    <div id="div2">
        <div id="div3">
            <div id="div4">             
                <canvas id="canvas" width="500" height="220"></canvas>
            </div><!--div4-->
        </div><!--div3-->
    </div><!--div2-->
</div><!--div1-->

我认为你在某个地方有拼写错误或者在你的div或canvas元素中应用z-index的样式。

<div> </div> </canvas>中的<canvas>

1 个答案: