Question

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

 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;

}

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

我在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-->

然而，当我在下面放置另一排偏光片时，由于这个边缘，它们与顶部偏光片重叠。

以前有人做过这样的事吗？任何帮助赞赏

Answer 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;
}

Here is a demo for you。请注意，您也应该从<h5>删除负边距。

将文本放在填充空间内

1 个答案: