html - 在使用该类的图像下方需要一个阴影图像

Question

我想在 img 类中使用上面的图像将照片放在下面。有那个类(class)。请参阅下面的标记示例。

<img class="img-shadow" src="image.jpg">

或者可能是这样的

<div class="img-shadow">
   <img src="image.jpg">
</div>

CSS 看起来如何？

Answer 1

HTML:

<div class="img-shadow">
    <img src="image.jpg">
</div>

CSS:

.img-shadow{
    background:url(your image URL) no-repeat center bottom;
    padding-bottom:20px;
    text-align:center;
}

调整 div 底部的内边距以增加或减少图像底部与阴影之间的距离。