Как наложить на холст над текстом?

My Dilemma

Привет всем! Таким образом, изображение выше - это то, что я пытаюсь достичь с помощью моего кода, однако один или другой всегда подталкивают другого либо ниже него, либо над ним вместо того, чтобы просто сидеть друг над другом.

Я читал о z-index и top: 0; но независимо от того, что я пытаюсь, я не могу получить результаты, которые я хочу. Может быть, я использую эффект fade в 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>

Ответы

Ответ 1

Я предполагаю, что вы ищете: http://jsfiddle.net/6C55n/

Я устанавливаю абсолютное положение как для текста, так и для холста. После этого я просто устанавливаю большой z-индекс на холст.

То, что должно быть замечено здесь, - это использование прозрачного изображения для холста.

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

Ответ 2

Это отлично работает для меня: 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;    
}