0

我正在使用图像周围的填充并将背景颜色设置为白色来创建具有宝丽来效果的图像

 img.team {
background: none repeat scroll 0 0 white;
box-shadow: 0 9px 25px -5px #000000;
display: block;
margin-left: auto;
margin-right: auto;
max-width: 100%;
padding: 12px 12px 50px;

}

我想做的是在图像下方的空间和填充之间写一个标题，就像我用毡笔在上面写的一样。我使用引导缩略图作为我的图像。

我在 h5 上尝试了负边距

 h5 {
color: #333333;
font-size: 1.1em;
margin-top: -35px;
text-align: center;

}

HTML 是

      <div class="container">
      <div class="row">
      <div class="span4">
        <div class="thumbnail">
         <img class="team"  src="http://placehold.it/160x120"  title="Swimming" alt="Swimming" ></a>

            <h5>Swimming</h5>



   </div><!--End of thumbnail-->
</div><!--End of span4-->

但是，当我在下面放置另一排宝丽来时，它们会因为这个边距而与顶部重叠。

有没有人做过这样的事情？任何帮助表示赞赏

4

1 回答 1

1

而不是样式化<img>, 样式，div.thumbnail而不是：

<div class="thumbnail">
    <img class="team"  src="http://placehold.it/160x120"  title="Swimming" alt="Swimming" ></a>

    <h5>Swimming</h5>
</div>

CSS：

div.thumbnail {
    background: none repeat scroll 0 0 white;
    box-shadow: 0 9px 25px -5px #000000;
    padding: 12px;
    display: inline-block;
}

这是给你的演示。请注意，您应该删除负边距<h5>。

于 2012-07-06T22:22:08.360 回答