9

画像の上に div を配置して、画像の上に直接キャプションのように機能させようとしています。

キャプションが他の時間よりも長い場合があるため、キャプションの高さが長い場合があるため、特定の margin-top:-px を設定できません。

私はこれを試しましたが、リンクの背景（黒）が表示されません。また、先ほど述べたように、キャプションの高さが変わるため、このメソッドはゴミです：

 <div>  

  <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;">
   <a href="LINK" ><div style="width:210px;background-color:black;color:white;bottom:0;margin-top:-20px;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

 </div>
4

5 に答える 5

15

次のようなことを試してください：

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="min-width:220px;max-width:220px;">
   <div style="position:absolute;width:210px;background-color:black;color:white;top:0;left:0;padding-left:10px;padding-top:10px;font-size:16px;z-index:5;"><a href="LINK" ><? echo $title ?></a></div>

</div>

いくつかのことが起こっていました:
1) 'a' タグ内に div がありました。ブロック レベルの要素 (div など) をインライン レベルの要素 (a など) 内に配置しないでください。
2）画像からフロートを削除し、外側のdivの位置を相対に、内側のdivの位置を絶対に設定してから、それを含むdivの上部に絶対に配置します。そこから、適切な測定のために 0 より大きい z-index を内側の div に追加して、画像の上にスタックされたままになるようにします。

于 2012-10-01T19:48:15.783 に答える
3

position:absolute; left:0px;top:0px;z-index: 2;現在の div に追加しstyle="position:relative;"、親 div に追加します

<div style="position:relative;">  

  <img src = "<? echo $image_url ?>" style="float:left;min-width:220px;max-width:220px;">

<a href="LINK" ><div style="position:absolute;z-index: 2;left:0px;top:0px;width:210px;background-color:black;color:white;bottom:0;padding-left:10px;padding-top:10px;font-size:16px;"><? echo $title ?></div></a>

于 2012-10-01T19:46:36.330 に答える
1

CSS の z-index プロパティを使用して、テキストを画像の上に配置します。より高い z インデックスを持つ要素が一番上に表示されます。

于 2012-10-01T19:44:31.690 に答える
1

このコードは、あなたがやろうとしていることに対してうまくいくはずです:

<div style="background: transparent url('<? echo $image_url ?>') no-repeat 0 0; padding: 10px 0 10px 10px; width: 200px;"><a href="LINK"><? echo $title ?></a></div>
于 2012-10-01T19:45:36.507 に答える