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 に答える