Superposition de plusieurs images PNG

Question

Bonsoir. Mon problème est le suivant:

Je rends des informations sur des planètes extrasolaires à partir d'une base de données. Lorsqu'on le demande (PHP/MySQL), chaque planète se présente sous la forme d'un .png basé sur son type et reçoit une hauteur et une largeur en fonction de sa taille (max de 150px), et est centrée dans une cellule de tableau. Ce que je veux faire est de superposer plusieurs .pngs pour les nuages ​​et autres textures, qui seraient de la même taille et centrées dans la cellule du tableau.

http://w.tarazedi.com/image1100 est une image du problème.

Je sais comment je ferais cela avec le positionnement absolu et l'index z si la page était statique, mais je ne sais pas comment le faire avec du contenu dynamique. Aussi je ne sais pas comment le faire comme une propriété générique (plutôt que d'avoir une définition CSS pour chaque planète rendue).

Answer 1

Le processus sera le même que ce soit statique ou dynamique ... enveloppez chaque image de base de planète dans un conteneur, la position de vos superpositions par rapport à cela, par ex.

<div class="planetimage"> 
    <img src="baseimage.png" class="base" /> 
    <img src="clouds.png" class="overlay" style="z-index: 1" /> 
    <img src="othertexture.png" class="overlay" style="z-index: 2" /> 
</div> 

.planetimage { 
    position: relative; 
} 

.planetimage .base { 
    position: absolute; 
    top: 0; 
    left: 0; 
    z-index : 0; 
} 

.planetimage .overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
} 

La seule chose que vous auriez à garder une trace de l'indice est z pour chaque superposition supplémentaire que vous ajoutez, ils pile correctement au-dessus de l'autre.

Answer 2

Voyez si vous pouvez placer chaque planète dans une div avec la même classe, et positionnez cette classe absolument dans votre élément parent. Cela rendra la propriété identique sur chacune de vos planètes, pas d'index z nécessaire. Vous aurez besoin de jouer dans le but de tout aligner comme vous le souhaitez, essais et erreurs.

<div class="overlay"><img src="planet.png"/></div> 
<div class="overlay"><img src="clouds.png"/></div> 
<div class="overlay"><img src="texture.png"/></div> 
<div class="overlay"><img src="other.png"/></div>​ 

.overlay{position:absolute;}​ 

Cela aide-t-il? Dites-nous comment cela se passe.

Answer 3

$type = mysql_query("SELECT type FROM planetproperties WHERE planetid='$planetid'");    $type = mysql_fetch_row($type) or die(mysql_error());    $type = $type[0]; 
$subtype = mysql_query("SELECT subtype FROM planetproperties WHERE planetid='$planetid'");   $subtype = mysql_fetch_row($subtype) or die(mysql_error());   $subtype = $subtype[0]; 
$fulltype = $type.$subtype; 
$cloud = mysql_query("SELECT cloudtex FROM planetproperties WHERE planetid='$planetid'");   $cloud = mysql_fetch_row($cloud) or die(mysql_error());    $cloud = $cloud[0]; 
$rad = round($radius/1000, 0); if($rad > 150){ $rad = 150; } 
$prad = $rad * (1 - $oblateness); 
$prad = round($prad, 0); 
echo "<tr><td style=\"text-align:center;vertical-align:middle\">"; 
echo "<div style=\"width:$prad;height:$prad;padding:0;margin-left:auto;margin-right:auto;float:center;position:relative;background:none\">"; 
echo "<img src=\"$fulltype.png\" height=$rad width=$prad style=\"position:absolute;left:0;top:0;z-index:0\">"; 
if($cloud){ echo "<img src=\"$cloud.png\" height=$rad width=$prad style=\"position:absolute;left:0;top:0;z-index:10\">"; } 

:) Merci à tous.