0

我有一个网页，我试图在一组 div 标签中放置一个画布。但是，我需要将画布放在顶部/div 内图像上方的一层。无论我尝试什么或将 canvas 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-->

无论我在 div 中的哪个位置插入

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

任何帮助将不胜感激。

4

1 回答 1

0

似乎为我工作：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-->​

我认为您在某处有拼写错误，或者将 z-index 应用于您的 div 或 canvas 元素的样式。

于 2012-11-13T05:00:51.640 回答