Question

晚上好。我的问题是：

我正在从数据库渲染太阳系外行星的信息。当查询（PHP / MySQL）时，每个行星根据其类型呈现为.png，并根据其大小（最大为150px）给出高度和宽度，并在表格单元格中居中。我想要做的是为云和其他纹理叠加多个.png，这些纹理大小相同，并且也在表格单元格中居中。

http://w.tarazedi.com/image1100是问题的图像。

我知道如果页面是静态的，我会如何使用绝对定位和z-index，但不知道如何使用动态内容。此外，我不知道如何将其作为通用属性（而不是为每个渲染的行星设置CSS定义）。

Answer 1

无论是静态的还是动态的，过程都是相同的...将每个行星基础图像包裹在容器中，覆盖相对于该位置的位置，例如

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

您唯一需要跟踪的是您添加的每个额外叠加层的z-index，因此它们可以正确堆叠在一起。

Answer 2

看看你是否可以将每个星球放在具有相同类的div中，并将该类绝对放在父元素中。这将使每个行星的属性相同，不需要z-index。你需要四处游玩，以便按照你想要的方式，试验和错误排列所有内容。

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

这有帮助吗？让我们知道结果如何。

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

:)谢谢大家。

覆盖多个PNG图像

3 个答案: