圖像上的填充文字

對於這個非常不利的問題，我表示歉意，但在這裏找不到類似的問題。圖像上的填充文字

所以我HTML看起來是這樣的：

<div id="headerone"> 
    <h1>How To <br> Bench Press</h1> 
</div>

和我的CSS是這樣的：

#headerone { 
      background: url(http://www.prodality.com/wp-content/uploads/2013/03/Workout.jpg); 
      background-repeat: no-repeat; 
      background-position:center; 
      height:630px; 
      padding-top: 100px; 
      padding-left: 600px; 
     } 
     #headerone h1 { 
      background-color: black; 
      display: inline; 
      font-size: 30px; 
      color: white; 
      line-height: 50px; 
      padding: 10px; 
      box-decoration-break: clone; 
      -webkit-box-decoration-break: clone;

我想有一個背景英雄形象100％的寬度，我試圖達到這樣的效果：

http://codepen.io/anon/pen/Wbaapq

在我的圖像之上，但是如果我將背景圖像的寬度設置爲100％，它也會改變文本的寬度。

使用上面的代碼，一切都應該在哪裏，但是當我縮小瀏覽器窗口時，文本的位置似乎是絕對的，並且不隨我的其餘代碼移動。有沒有更好的方法來做到這一點，或者我輸入錯誤？我需要添加什麼？請讓我知道，謝謝！

最好的問候， Omgummy

來源

2015-03-13 omgummy

是的，你需要添加@media斷點 – 2015-03-13 07:27:11

使用@media斷點demo

@media (max-width: 400px) { 
    .padded-multiline { 
    width: 100%; 
    } 
}

來源

2015-03-13 07:31:33

我的文字似乎仍然當我儘量減少我的瀏覽器窗口中不動？ – omgummy 2015-03-13 07:41:24

@omgummy我的代碼在你的bowser中有效嗎？ – 2015-03-13 07:43:51

它看起來像工作正常，我逐字複製它，現在文本隨瀏覽器移動，但背景圖像大小發生變化，並且不會100％與瀏覽器一起瀏覽。 – omgummy 2015-03-13 07:49:17

圖像上的填充文字

回答

相關問題