如何在图像上保持文本框响应?

时间:2018-03-06 20:16:36

标签: css

我有一张图片,遗憾的是它不能用作背景图片,上面有一个文本框。它可以工作,但它没有响应,使用bootstrap 4.当我达到较小的屏幕尺寸时,文本框超出了图像。

在初始尺寸下它很好但是一旦缩小页面,文本框就会弹出。这是HTML:

git pull

这是CSS:

<div class="container-fluid something-container">
<div class="row">
<img class="img-responsive something-img" src="http://placehold.it/900x100"/>
<div class="container">
  <div class="row something-front d-flex justify-content-center">
    <div class="col-sm-8 something-text text-center">
      <h1>Header</h1>
      <p>Here are some words but typically a lot more are present here.</p>
    </div>
</div>

我创建了一个CodePen来显示它:CodePen

如何让该文本框保留在图像中?

1 个答案:

答案 0 :(得分:2)

将图片和文字包裹在.image-wrapper之类的包装div中,如下所示:

<div class="container-fluid something-container">
  <div class="row">
    <div class="container">
      <div class="row something-front d-flex justify-content-center">
        <div class="image-wrapper">
          <img class="img-responsive something-img" src="http://placehold.it/900x100" />
          <div class="col-sm-8 something-text text-center">
            <h1>Header</h1>
            <p>Here are some words but typically a lot more are present here.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS:

.image-wrapper {
  width: 900px;
  height: 100px;
  position: relative;
  margin: 0 auto;
}

.something-img {
  width: 100%;
  height: auto;
}

.something-text {
  position: absolute;
  text-align: center;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  height: 90%;
} 

这使得定位到父元素的工作成为可能,您可以独立地设置图像和文本的样式,同时保持框尺寸相同/响应。字体大小必须随着大小的增加/缩小而改变以保持在框中,但文本将以图像为中心。