覆蓋多個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圖像

回答

相關問題