css图片浮在文字正下方

在网页设计中，经常需要实现让图片浮在文字正下方的效果。这样的效果可以提高图片的展示效果，让网页更加美观。

示例代码：

<div class="img-wrap">
  <img src="example.jpg" alt="示例图片">
  <p class="caption">这是一张示例图片</p>
</div>

在上面的代码中，我们使用了一个div元素来包裹图片和图片下方的文字。首先将img-wrap元素设置为相对定位，然后将文字部分使用绝对定位，bottom:0; left:0;将其定位在图片底部，并使用了rgba(0,0.5)来设置背景颜色以及半透明度，使得文字更加清晰。

使用这种方案，我们就可以在网页中实现图片浮在文字正下方的效果，并且可以自由修改样式来实现不同的展示效果。