覆盖多个PNG图像

晚上好。我的问题是这样的：覆盖多个PNG图像

我从数据库渲染太阳系外行星的信息。当查询（PHP/MySQL）时，每个星球都会根据其类型呈现为.png，并根据其大小（最大值为150px）给出高度和宽度，并且位于表格单元格中间。我想要做的是为云和其他纹理覆盖多个.png，它们的大小相同，并且也位于表格单元格中间。

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

我知道我会如何做到这一点绝对定位和Z - 索引如果页面是静态的，但不知道如何做到动态内容。此外，我不知道如何将其作为通用属性（而不是为每个渲染的星球定义CSS）。

来源

2012-10-16 Victor Sheckels

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

<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指数对每个要添加额外的叠加，所以他们对彼此顶部堆放不当。

来源

2012-10-16 21:36:02

完全删除z-index应该也可以工作 –

另外，你的一个css选择器应该是'.planetimage .overlay' –

基本图像不应该是绝对的，否则容器将不会有正确的大小 –

看看你是否可以将每个行星放在一个具有相同类别的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-16 22:18:08

$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-22 23:47:54

覆盖多个PNG图像

回答

相关问题