具有覆盖文本的响应图像保持在相同位置

Question

我想在图像上添加叠加文本，即使我在浏览器中放大或缩小，或者在不同的设备中查看文本，文本也不会出现在图像之外，但总是在图像内部。

此外，即使使用不同的设备，宽度和高度均为100％且文本始终位于相同位置的图像也是如此。使用仅 CSS和HTML，每个框架都可以使用Bootstrap，MaterializeCSS，Foundation，SemanticUI等。

.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
}

img {
  width: 100%;
}

h1 {
  position: absolute;
  top: 200px;
  left: 0;
  width: 100%;
}

h1 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

<div class="image">
  <img src="http://www.thepoortraveler.net/wp-content/uploads/2012/06/Banaue-Rice-Terraces.jpg" alt="Banaue Banaue-Rice-Terraces" />
  <h1><span>The Summer Capital of the Philippines<br />Baguio City</span></h1>
</div>

Answer 1

即使调整相对<h1>

的大小，这也会<div>居中

h1 { 
   position: absolute; 
   top: 50%; 
   left: 50%; 
   transform:translate(-50%, -50%); 
}

Answer 2

＆＃13;

＆＃13;

.image {
  position: relative;
  width: 100%;
  /* for IE 6 */
}

img {
  width: 100%;
}

h1 {
  position: absolute;
  top: 40%;
  width: 100%;
}

h1 span {
  color: white;
  font: bold 24px/45px Helvetica, Sans-Serif;
  letter-spacing: -1px;
  background: rgb(0, 0, 0);
  /* fallback color */
  background: rgba(0, 0, 0, 0.7);
  padding: 10px;
}

＆＃13;

<div class="image">
  <img src="http://www.thepoortraveler.net/wp-content/uploads/2012/06/Banaue-Rice-Terraces.jpg" alt="Banaue Banaue-Rice-Terraces" />
  <h1><span>The Summer Capital of the Philippines<br />Baguio City</span></h1>
</div>

＆＃13;

＆＃13;

＆＃13;