Come sovrapporre una tela al testo?

My Dilemma Come sovrapporre una tela al testo?

Ciao a tutti! Quindi l'immagine sopra è ciò che sto cercando di ottenere con il mio codice, tuttavia l'uno o l'altro spinge sempre l'altro al di sotto o sopra di esso, invece di stare solo uno sopra l'altro.

Ho letto su z-index e in alto: 0; ma non importa quello che cerco, non riesco a ottenere i risultati che voglio. Potrebbe essere che sto usando un effetto dissolvenza in javascript sul testo, ma non ne sono sicuro. Ecco il mio codice, cosa consiglieresti? Grazie!

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

fonte

2012-12-21 KingPolygon

Prima di tutto ti suggerisco di convalidare il tuo codice HTML usando [Validatore W3] (http://validator.w3.org/) – Teneff

Puoi allegare jsFiddle per favore? http://jsfiddle.net/ – Sonhja

@Teneff Grazie per il link, l'ho appena fatto !!! Ho modificato di nuovo il codice che ho postato. Lo apprezzo davvero!! Mi sono liberato di 20 errori! Tuttavia la sintassi non era il problema:/continuavo a riscontrare gli stessi problemi. – KingPolygon

Direi che è quello che stai cercando: http://jsfiddle.net/6C55n/

Ho impostato la posizione assoluta su entrambi: il testo e la tela. Dopodiché ho appena impostato un maggiore z-index sulla tela.

La cosa che dovrebbe essere notato qui è l'uso di un'immagine trasparente per la tela.

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

fonte

2012-12-21 09:51:54

Domanda: c'è un modo per far passare gli eventi mouse e tastiera al testo sottostante? –

Questo funziona bene per me: 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;  
}

fonte

2012-12-21 09:49:27

Come sovrapporre una tela al testo?

risposta

Problemi correlati