web-dev-qa-db-ja.com

テキストの上にキャンバスをオーバーレイするにはどうすればよいですか？

My Dilemma

こんにちは、みなさん！したがって、上の画像は私がコードで達成しようとしているものですが、一方または他方は、単に互いの上に座っているのではなく、常に他方をその下または上に押しています。

私はz-indexとtop：0について読んでいます。しかし、何をしようとしても、思い通りの結果が得られないようです。テキストにフェードインJavaScript効果を使用している可能性がありますが、よくわかりません。これが私のコードです、あなたは何をお勧めしますか？ありがとう！

    <style type="text/css">

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    background-color: #FFFFFF;
    background-repeat: repeat;
    font-size: 12px;
    color: #333366;
}

#picOne, #picTwo {
position:relative;
display: none;
float:center;
}

#pics {
}

#my-object {
  position: absolute;
  z-index: 1;
  top: 0px;
}

</style>

<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function() {
    $('#picOne').delay(1000).fadeIn(2000).delay(2500);
    $('#picTwo').delay(2000).fadeIn(1500).delay(2000);
});
</script>

</head>

<body>

<div id="pics" align="center">
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>

<td valign="middle" align="center">
<table cellpadding="0" cellspacing="0" border="0">

        <tr>
        <td align="center" valign="middle"><font size="200" face="Arial" id="picTwo" color="black">SOME TEXT</font></td>
        </tr>

        <tr><td align="center" valign="middle">     
<script type="text/javascript" src="widgets.js"></script>
<script src="three.js" type="text/javascript"></script>
<script src="trail.js" type="text/css"></script>
<div id="my-object">
<canvas></canvas>
</div></td>
        </tr>


</table>
</td>
</tr>
</table>

</div>

</body>

</html>
htmlcssoverlayhtml5-canvas
12
KingPolygon

私はそれがあなたが探しているものだと思います： http://jsfiddle.net/6C55n/

絶対位置をテキストとキャンバスの両方に設定しました。その後、キャンバスにより大きなz-indexを設定しました。

ここで注目すべきは、キャンバスに透明な画像を使用していることです。

JavaScript

var canvas = document.getElementById('can'),
    context = canvas.getContext('2d');

var img = document.createElement('img');
img.onload = function () {
    context.drawImage(this,0,0);
};
img.src = 'http://www.planet-aye.co.uk/seasonal05/snow.png';
​

[〜＃〜] html [〜＃〜]

<canvas width="640" height="480" id="can"></canvas>
<div id="labelDiv">Some text</div>​

[〜＃〜] css [〜＃〜]

#labelDiv {
    font-size: 70px;
    position: absolute;
    top: 280px;
    left: 100px;
    z-index: 1;
}
#can {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 3;
}

10
Minko Gechev

これは私にとってはうまくいきます： JSFiddle

HTML

​<p>Some text</p>
<canvas></canvas>​​​​​​​​​​​​​​​​​​​​​

CSS：

body {
   background-color:#5FC0CE;
}

canvas {
  position:absolute;
  top:0;
  left:0;
  z-index:100;

  background-color:#FFAE73;  


  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
  filter: alpha(opacity=50);
  -moz-opacity:0.5;
  -khtml-opacity: 0.5;
  opacity: 0.5;    
}
5
Philipp Hofmann