覆盖文字保持相同位置的响应式图像 [英] Responsive Image With An Overlay Text Stay on The Same Position

问题描述

我想在图片上添加叠加文字，即文字不能超出图片范围，但始终在图片内部，即使我在浏览器中放大或缩小，或者我在不同的设备中查看。

另外，即使使用不同的设备，图像的宽度和高度都为100％，并且文字始终位于同一位置。仅使用 CSS和HTML是每个框架执行此类Bootstrap，MaterializeCSS，Foundation，SemanticUI等的方式。

  .image {position：relative;宽度：100％; / * IE 6 * /} img {width：100％;} h1 {position：absolute;顶部：200px;左：0;宽度：100％;} h1 span {color：white; font：bold 24px / 45px Helvetica，Sans-Serif; letter-spacing：-1px;背景：rgb（0，0，0）; / *备用颜色* / 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.jpgalt =Banaue Banaue-Rice-Terraces/> < h1>< span>菲律宾夏季资本< / gt;碧瑶市< / span>< / h1>< / div>

<

falsedata-console =truedata-babel =false>

.image {position：relative;宽度：100％; / * IE 6 * /} img {width：100％;} h1 {position：absolute;顶部：40％;宽度：100％;} h1 span {color：white; font：bold 24px / 45px Helvetica，Sans-Serif; letter-spacing：-1px;背景：rgb（0，0，0）; / *备用颜色* / 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.jpgalt =Banaue Banaue-Rice-Terraces/> < h1>< span>菲律宾夏季资本< / gt;碧瑶市< / span>< / h1>< / div>

I would like to add an overlay text over an image, that the text cannot go outside the image but always inside the image even I zoom in or zoom out in my browser or I view that in different devices.

Also, an image with 100 percent width and height and the text always on the same position even using different device. Using only CSS and HTML the way that every framework do such Bootstrap, MaterializeCSS, Foundation, SemanticUI etc .

.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>

解决方案

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

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

这篇关于覆盖文字保持相同位置的响应式图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！