0

晚上好。我的问题是这样的：

我正在从数据库中渲染有关太阳系外行星的信息。查询时（PHP/MySQL），每个行星根据其类型呈现为 .png，并根据其大小（最大为 150 像素）指定高度和宽度，并在表格单元格中居中。我想要做的是为云和其他纹理覆盖多个 .png，它们的大小相同，并且也在表格单元格中居中。

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

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

4

3 回答 3

6

无论是静态的还是动态的，过程都是一样的......将每个行星基础图像包装在一个容器中，您的叠加层相对于它的位置，例如

<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，因此它们可以正确堆叠在一起。

于 2012-10-16T21:36:02.163 回答
0 
 $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\">"; }

:) 谢谢各位。

于 2012-10-22T23:47:54.217 回答
0

看看您是否可以将每个行星放在具有相同类的 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;}​

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

于 2012-10-16T22:18:08.273 回答