Immagine una sotto l'altra, in un modo particolare ... Con esempio

**anerDev** · 31-12-2011, 04:04

Ciao a tutti !

andando sull'iTunes Store ho notato che le icone delle app sono realizzate in realtà da 2 img sovrapposte.

Vi faccio un esempio:

andate qua: http://itunes.apple.com/it/app//id428851691?mt=8

l'icona che c'è a sinistra in realtà è composta da queste 2 immagini:

questa immagine è di sopra rispetto alla seconda:

http://r.mzstatic.com/htmlResources/...es/mask175.png

Mentre questa immagine è sotto a quello descritta sopra:

http://a5.mzstatic.com/us/r1000/073/...175x175-75.jpg

Ora come realizzo tutto ciò in Css ?

Grazie !!

**il mandorlone** · 31-12-2011, 11:51

ciao ti faccio un esempio che una volta ho trovato una guida molto utile :

codice:

<html>

	<head>
		<title>prova piani</title>
<style type="text/css">
      /* ok li dove è sritto z-index:11 è vuol dire che il cerchio è sopra il rombo perchè 11 è maggiore di 10 è il livello del piano z prova a cambiarlo */
      #cerchio {position : absolute; left:10px; top:10px; z-index:11}

      #rombo {position:relative; left : 10px; top: 10px; z-index:10}

</style>
	</head>


<p id="cerchio"></p>

<p id="rombo"></p>
	
	
	
	
	<body>

	</body>
</html>

**anerDev** · 31-12-2011, 13:49

Funziona !!! Ecco come l'ho sistemato !!

codice:

<html>

	<head>
		<title>prova piani</title>
<style type="text/css">
    
      #cerchio {position : absolute; left:6px; top:8px; z-index:11}

      #rombo {position:relative; left:0px; top:0px; z-index:10}

</style>
	</head>

<body>

<div id="container">

	<span id="cerchio">[img]sopra.png[/img]</span>

	<span id="rombo">[img]sotto.jpg[/img]</span>
	
</div>
	
	
	

	</body>
</html>

Grazie !!

Discussione: Immagine una sotto l'altra, in un modo particolare ... Con esempio

Strumenti discussione

Ricerca discussione

Visualizza

Immagine una sotto l'altra, in un modo particolare ... Con esempio

Permessi di invio