html - 问题照片上的文字并使其响应

Question

我正在处理一个 Web 元素，其中我在屏幕中央有一张图片。在那张照片的顶部，我在一个框中有一些文字。当屏幕全宽时，我“几乎”让它尽可能大。但是，当我缩小屏幕时，文本会到处移动。

我有以下代码:

.imageFit {
  padding-top: 5%;
  width: 100%;
  height: 100%;
}
.imageText span { 
  position: absolute; 
  top: 75%;
  left: 40%;
  padding: 10px;
  text-align:center;
  color: white;
  background: rgba(0,0,0,0.7);
  letter-spacing: -1px;
}

<div class="container">
  <img class="imageFit" src="https://hd.unsplash.com/photo-1420593248178-d88870618ca0">
  <div class="container">
    <h1 class="imageText "><span>Begins with one step</span></h1>
  </div>
</div>

提示:如果需要更多信息，请告诉我。

Answer 1

给你。我删除了一些不必要的标签，还使您的文本具有响应性。

.imageFit {
   padding-top: 5%;
   width: 100%;
   height: 100%;
 }

 .imageText { 
   position: absolute; 
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 10px;
   text-align:center;
   color: white;
   background: rgba(0,0,0,0.7);
   letter-spacing: -1px;
   font-size: 4vw;
  }
.container {
  position: relative;
  }

<div class="container">
  <img class="imageFit" src="https://pixabay.com/static/uploads/photo/2016/01/12/19/16/painting-1136443_960_720.jpg">
  <h1 class="imageText ">Begins with one step</h1>
</div>