Question

我在这里看到过一些类似的问题，但是没有一个解决方案对我有任何帮助。（我尝试按照how to display text over an image in Bootstrap 3.1的建议将图像设为背景，但这似乎不起作用）

我正在尝试使用Twitter的Bootstrap在图像上显示文本。

我正在使用缩略图类，因为它会自动调整图像大小以适合列。但是，我无法找到一种令人满意的方法来将中心文字添加到图像中。

以下是该页面的屏幕截图：http://imgur.com/oWr0WHb

以下是相关代码片段：

<div class="menuphotos">
<div class="container">
    <h2> Lorem Ipsum</h2>
        <p>Bal Bla Bla Bla </p>
        <div class="row">
            <div class="col-md-4">
                  <div class="thumbnail">
                    <a href="#"><img src="http://imgur.com/4uEiK33.jpg"></a>
                     <div class="h2 strong">Geology and Geophysics</div>
                     <p> Bla Bla Bla</p>
                </div>
            </div>

            <div class="col-md-4">
                 <div class="thumbnail">
                    <a href="#"><img src="http://imgur.com/U5IO8eV.jpg"></a>
                    <div class="h2 strong">Astronomy</div>
                <p> Bla Bla Bla</p>
                </div>
            </div>

            <div class="col-md-4">
                 <div class="thumbnail">
                    <a href="#"><img src="http://imgur.com/OZ5C3Wy.jpg"></a>
                   <div class="h2 strong">Etc</div>
                   <p> Bla Bla Bla</p>
                </div>                
            </div>
        </div>
    </h2>
</div>

和

.menuphotos{
background-color: #efefef;
border-bottom: 1px solid #dbdbdb
}

.menuphotos h2 {
    color: #393c3d;
    font-size: 24px;
}

.menuphotos p {
    font-size: 15px;
    margin-bottom: 13px;
}

我的全部代码都在这里：http://pastebin.com/ghYwGPg1（HTML）在这里：http://pastebin.com/EgjywRr9（CSS）

如果无法使用缩略图类在此图像的顶部添加文本。还有什么方法可以让图像自动调整大小以适应列。所有不同尺寸的图像都使用，但纵横比相同（2：3）

Answer 1

您可以在缩略图上添加一个类来使位置相对，然后您可以将文本绝对定位在div中，以便它在图像的顶部分层。

这样的事情：

<div class="thumbnail rel-pos">
  <a href="#"><img src="http://imgur.com/U5IO8eV.jpg"></a>
  <div class="over-text">
   <h2>Astronomy</h2>
   <p> Bla Bla Bla</p>
  </div>
</div>

.rel-pos {
  position: relative;
}

.over-text {
  width: 100%;
  position: absolute;
  top: 300px;
  text-align: center;
  z-index: 10;
}

HTML在bootstrap中的div类缩略图上添加文本

1 个答案: