如何使用bootstrap在连续的图像上创建文本？

Question

现在它没有响应，两个图像应该在一行中。我想在这些图像上制作像绘画和摄影这样的文字。怎么可能呢？

＆＃13;

＆＃13;

.caption {
  position: absolute;
  top: 9%;
  left: 11px;
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.caption1 {
  position: absolute;
  top: -51px;
  left: 11px;
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.imageandtext {
  position: relative;
}

＆＃13;

<div class="grid-two imageandtext">
  <figure>

    <img src="http://lorempixel.com/300/300/" class="img-thumbnail">
    <div class="caption">
      <p>Painting</p>
    </div>
    <div class="imageandtext image_grid">
      <img src="http://lorempixel.com/300/300/?r" class="img-thumbnail">
      <div class="caption1">
        <p>Photography</p>
      </div>
    </div>
  </figure>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要在相对元素中覆盖图像和标题文本

figure{
    position: relative;
}

检查以下代码段 -

＆＃13;

＆＃13;

figure{
	position: relative;
}
.caption {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.caption1 {
  position: absolute;
  top: 10px;
  left: 11px;
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.imageandtext {
  position: relative;
}

＆＃13;

<div class="grid-two imageandtext">
  	<figure>
	    <img src="http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_center/fat_cat.jpg" class="img-thumbnail">
	    <div class="caption">
	      <p>Painting</p>
	    </div>
    </figure>
    <figure>
	    <div class="imageandtext image_grid">
	      <img src="http://res.cloudinary.com/demo/image/upload/w_200,h_200,c_crop,g_center/fat_cat.jpg" class="img-thumbnail">
	      <div class="caption1">
	        <p>Photography</p>
	      </div>
	    </div>
  	</figure>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

稍微修改了你的HTML和CSS

.image_and_text {
  position: relative;
}

.image_and_text .caption {
  position: absolute;
  top: auto;
  bottom: 0px;
  left: 30px;
  color: white;
  text-shadow: 2px 0px 6px rgba(0, 0, 0, 0.5);
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row">
    <div class="col-xs-6 image_and_text">
      <img src="http://lorempixel.com/300/300/" class="img-responsive img-thumbnail">
      <div class="caption">
        <p>Painting</p>
      </div>
    </div>
    <div class="col-xs-6 image_and_text">
      <img src="http://lorempixel.com/300/300/?r" class="img-responsive img-thumbnail">
      <div class="caption">
        <p>Photography</p>
      </div>
    </div>
  </div>
</div>

Answer 3

更新css部分

    figure {
      display: flex; /*For image lineup */
    }
   .imageandtext, .image_grid {
      position: relative;
    }

   .imageandtext, .image_grid {
       position: relative;
       margin:5px;
    }

figure {
  display: flex;
}

.caption {
  position: absolute;
  top: 9%;/*Change as your need*/
  left: 52px;/*Change as your need*/
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.caption1 {
  position: absolute;
  top: 51px; /*Change as your need*/
  left: 11px; /*Change as your need*/
  width: 100%;
  color: #fff;
  font-family: Myriad Pro regular;
  font-size: 15.31px;
}

.imageandtext,
.image_grid {
  position: relative;
  margin:5px;
}

<div class="grid-two imageandtext">
  <figure>
    <img src="http://lorempixel.com/300/300/" class="img-thumbnail">
    <div class="caption">
      <p>Painting</p>
    </div>
    <div class="imageandtext image_grid">
      <img src="http://lorempixel.com/300/300/?r" class="img-thumbnail">
      <div class="caption1">
        <p>Photography</p>
      </div>
    </div>
  </figure>
</div>