0

Web ページがあり、一連の 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-->

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

どこかにタイプミスがあるか、div または canvas 要素に z-index を適用してスタイリングしていると思います。

于 2012-11-13T05:00:51.640 に答える