我如何將文字覆蓋在畫布上？

嘿大家好！所以上面的圖片是我試圖用我的代碼實現的，但是其中一個或另一個總是將另一個推向下方或上方，而不是坐在彼此之上。

我一直在閱讀關於z-index和top：0;但無論我嘗試什麼，我似乎都無法得到我想要的結果。這可能是因爲我在文本上使用了淡入淡出效果，但我不確定。這是我的代碼，你會推薦什麼？謝謝！

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

來源

2012-12-21 KingPolygon

首先，我會推薦你使用[W3 Validator]（http://validator.w3.org/）驗證你的HTML – Teneff

你可以附加jsFiddle嗎？ http://jsfiddle.net/ – Sonhja

@Teneff感謝您的鏈接，我剛剛做到了！我重新編輯了我發佈的代碼。我真的很感激！！擺脫了20個錯誤！但是語法不是問題：/仍遇到相同的問題。 – 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; 
}

來源

2012-12-21 09:51:54

問：是否有辦法讓鼠標和鍵盤事件通過底層文本？ –

這對我工作得很好：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;  
}

來源

2012-12-21 09:49:27

我如何將文字覆蓋在畫布上？

回答

相關問題