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's）中。
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 回答
0 
<div style="position:relative;">  

<img  style=" border-radius: 10px 10px 10px 10px; 
              width: auto;
              height: 250px"

       src = "https://images.pexels.com/photos/904276/pexels-photo-904276.jpeg?auto=compress&cs=tinysrgb&h=350" 
      >

  <div style="position:absolute;
               width:100%;
               background-color:rgba(255, 255, 255, 0.3);
               color:white;
               bottom:0;
               left:0;
               padding-left:15px;
               font-size:17px;
               z-index:5;">
    <h3 style ="color:white">Title</h3>
    <h4 style ="color:white">Sub Title</h4>
    <p> Lorel Ipsum Blah blah </p>
  </div>

</div>

结果：

演示

请参阅CodePen上Hitesh Sahu ( @hiteshsahu )的 Pen zJPvOB。

于 2018-09-07T10:20:22.867 回答