0

データベースからページに画像をエコーする簡単なプログラムがあります。子要素が必要です。画像の上に表示される単純なわずかに透明なボックスです。

子要素は常に親よりも高い z-index を持っていることは知っていますが、画像は常に上に置きたいボックスを覆っています。ページが読み込まれているときは、希望の位置にボックスが表示されますが、画像が読み込まれるとボックスが消えます。

ここに jsFiddle があります: http://jsfiddle.net/EBvCZ/

PHP

echo '<div id="wrapper">';
   while ($data = mysql_fetch_array($query_run)) {                                      
      echo '<div id="picback"><div id="centerpic"><a href="image.php?photo_id='.$data['photo_id'].'" title="View Photo"><'.'img src="resizeimage.php?photo_id='.$data['photo_id'].'"></a>';
      echo '<br style="clear:both;" />';
      echo '<div id="titlepic">This is an image</div>';
        echo '</div></div>';
   }
echo '</div>

CSS

#wrapper {
   overflow:auto;
   width:1000px;
   height:1000px;
   margin: 20px auto;
}

#titlepic {
   background-color:rgba(0, 0, 0, 0.5);
   top:100px;
   width:200px;
   height:35px;
   position:relative;
}

#centerpic {
    position:relative;
   margin:auto;
   width: 200px;
   height: 150px;
   top:18.75px;
   overflow:hidden;
}

#picback { 
   position:relative;
   margin:10px 23px;
   top:75px;
   float:left; 
   width:250px;
   height:187.5px;  
   overflow:hidden;
}

#picback:hover {
   background-color:rgb(190,190,190); 
   -webkit-border-radius:0.4em;  
   -webkit-transition: background-color 0.5s;
}
4

1 に答える 1

0

ここに動作する js フィドルがあります: http://jsfiddle.net/XKHZv/3/

いくつかの .css の変更を行い、タイトルピックの前に 1 つの div を移動しました。

新しい .css は次のとおりです。

#wrapper {
    overflow:auto;
    width:1000px;
    height:1000px;
    margin: 20px auto;
}
#titlepic {
    margin-left:auto;
    margin-right:auto;
    background-color:rgba(0, 0, 0, 0.5);
    width:200px;
    height:35px;
    position:relative;
    clear: both;
}
#centerpic {
    position:relative;
    margin:auto;
    width: 200px;
    height: 150px;
    top:18.75px;
    overflow:hidden;
}
#picback {
    position:relative;
    margin:10px 23px;
    top:75px;
    float:left;
    width:250px;
    height: 203.75px;
    overflow:hidden;
}
#picback:hover {
    background-color:rgb(190, 190, 190);
    -webkit-border-radius:0.4em;
    -webkit-transition: background-color 0.5s;
}

次に、タイトルの写真の前に終了する div を移動する必要もあります。

于 2013-03-03T02:44:17.860 に答える