Question

我正在尝试在图像的右下角显示一个小图标。因此，图片在图片的右下角会出现一个小图标。

<div> 
<div class="tab-pane" id="activity">
    <div class="post clearfix">
    <?php 
    $suppport = $app->get_supportpage();
     foreach($suppport as $support){
    ?>
    <div class="user-block" style="margin-top:5px;">
      <img style="margin-top:3%;"class="img-circle" src="/assets/images/profielfotos/64hond.jpg">       
      <span class="username"><a href=""><?php echo $support['van_naam'] ?></a></span>
      <span class="description">                                      
<div style="  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 250px;">
<b><?php echo $support['bericht']; ?></b><br>
31 minuten geleden<p style="float:right;"><?php echo $support['type']; ?></p></div>
</span>

     </div><hr>
    <?php } ?>
   </div>
  </div>                            
</div>

Answer 1

使用div而不是img标签，并对图像使用background-image：url（'path'）并在图标上执行position：absolute

.image{
  width:100px;
  height:100px;
  position:relative;
  background-color:lime;
  background-image: url(//www.w3schools.com/Html/pic_trulli.jpg);
  background-size: cover;
}

.image .icon i{
  position:absolute;
  bottom:0px;
  right:0px;
  font-size: 33px;
  color: blue;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<div class="image">
  <div class="icon"><i class="fa fa-car"></i></div>
</div>

图片右下角的图片

1 个答案: