Jak mogę nakładać płótno na tekst?

My Dilemma Jak mogę nakładać płótno na tekst?

Hej wszystkim! Tak więc powyższy obrazek jest tym, co próbuję osiągnąć za pomocą mojego kodu, jednak Jeden lub drugi zawsze przesuwa drugi pod nim lub nad nim, zamiast tylko siedzieć jeden nad drugim.

Czytałem o z-index and top: 0; ale bez względu na to, co próbuję, nie mogę osiągnąć pożądanych rezultatów. Możliwe, że używam efektu zanikania javascript na tekście, ale nie jestem pewien. Oto mój kod, co poleciłbyś? Dzięki!

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

Źródło

2012-12-21 KingPolygon

Przede wszystkim zalecam sprawdzenie poprawności kodu HTML za pomocą [W3 Validator] (http://validator.w3.org/) – Teneff

Czy możesz dołączyć jsFiddle? http://jsfiddle.net/ – Sonhja

@Teneff Dzięki za link, właśnie zrobiłem !!! Ponownie zredagowałem kod, który opublikowałem. Naprawdę to doceniam!! Pozbyłem się 20 błędów! Jednak składnia nie była problemem:/nadal występują te same problemy. – KingPolygon

myślę, że to, czego szukasz: http://jsfiddle.net/6C55n/

Ustawiam pozycję absolutną dla obu - tekstu i płótna. Potem ustawiam większy indeks Z na płótnie.

Należy zwrócić uwagę na zastosowanie przezroczystego obrazu na płótnie.

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

Źródło

2012-12-21 09:51:54

Pytanie: Czy istnieje sposób na przeniesienie zdarzeń myszy i klawiatury do tekstu podstawowego? –

Działa to dobrze dla mnie: 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;  
}

Źródło

2012-12-21 09:49:27

Jak mogę nakładać płótno na tekst?

Odpowiedz

Powiązane problemy