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

各惑星を同じクラスの 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 に答える
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 に答える