如何在響應圖像上疊加文字 - 作出迴應？

Question

當我調整窗口大小時，我希望我的文字不會移動到圖像以外的任何位置。但是，當我調整它的大小時，這個代碼會上下飄蕩。 我的文字是動畫，但這不應該是正確的？

.line-1{ 
 
    width: 24em; 
 
    margin: 0 auto; 
 
    border-right: 2px solid rgba(255,255,255,.75); 
 
    font-size: 2vw; 
 
    text-align: center; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
    transform: translateY(-50%); 
 
    font-family: 'Bitter', serif; 
 
    color: rgba(255,255,255,.75); 
 
    text-shadow: 3px 3px \t #000000;} 
 

 
    /* Animation */ 
 
    .anim-typewriter{ 
 
     animation: typewriter 4s steps(44) 1s 1 normal both, 
 
       blinkTextCursor 500ms steps(44) infinite normal; 
 
    } 
 
    @keyframes typewriter{ 
 
     from{width: 0;} 
 
     to{width: 11em;} 
 
    } 
 
    @keyframes blinkTextCursor{ 
 
     from{border-right-color: rgba(255,255,255,.75);} 
 
     to{border-right-color: transparent;} 
 
    } 
 
    
 
    #image { 
 
     left: 0; 
 
     top: 0; 
 
    } 
 
    #text { 
 
     z-index: 200; 
 
     position: absolute; 
 
     left: 27%; 
 
     top: 25%; 
 
    }

<center> 
 
      <div> 
 
      <img id="image" src="service.png" alt="ZJ-Automobile Service Angebot" 
 
      height="60%" width="60%" /> 
 
      <a href="zjservice.html"><p id="text" class="line-1 anim-typewriter"> 
 
       Unser Serviceangebot</p></a> 
 
      </div> 
 
     </center>

是HTML也許錯了嗎？我真的不明白這裏可能會出現什麼問題。 另外我是初學者，所以請記住這一點。 我試着以不同的方式提出我的問題。

After resizing

明白我的意思？

Answer 1

簡單地說，你需要2個區域與1個位置：相對; 1位：絕對;

看看我用加載圖像做的這個例子，以向你展示它是如何工作的。

它想要一些代碼鏈接一個jsfiddle。

#thisbanner { 
    max-width: 700px; 
} 

演示：https://jsfiddle.net/norcaljohnny/nbfg3gtd/

並非所有的演示對堆棧工作，所以我會盡量添加在這裏，如果不是請參閱的jsfiddle演示鏈接上面。

#thisbanner { 
 
    max-width: 700px; 
 
} 
 

 
h1 { 
 
    position: absolute; 
 
    display: block; 
 
    width: 80%; 
 
    margin-top: -12%; 
 
    max-width: 610px; 
 
    font-size: 4vw; 
 
    font-family: 'Roboto Slab', Rockwell, Serif; 
 
    font-weight: bold; 
 
    color: #FFF; 
 
    text-shadow: 0 .125em .125em rgba(0, 0, 0, .5); 
 
    padding: .6em 1em .6em 1.7em; 
 
} 
 

 
.interior-header img { 
 
    display: block; 
 
    position: relative; 
 
    width: 100%; 
 
    height: auto; 
 
    border: 1px solid #b22222; 
 
    padding: 1px;

<div id="thisbanner"> 
 
    <div class="interior-header img"> 
 
    <div class="headerimage"> 
 

 
     <img src="http://i.stack.imgur.com/i3eqP.jpg" width="630" height="240" alt="Traffic Control" /> 
 

 
     <h1>Traffic Control</h1> 
 
    </div> 
 
    </div> 
 
</div>