如何在響應佈局中將背景圖像上的元素設置爲

- >我的目標是將文本放在圖像背景上，並在重新調整瀏覽器窗口大小時將其移動到背景中在圖像的邊緣）。我不想保留圖片下方的文字。如何在響應佈局中將背景圖像上的元素設置爲

問題： 我下面this教程瞭解響應設計。在完成教程之後，我設定了將圖像上的所有文字移動的目標。基本上我想使用紅色圖像作爲<section>和<aside>標籤中的所有內容的背景（它只是文本，但我猜它也適用於表單等）。

我的方法是換這兩個標籤中的另一個<div id="content">（下依然<div id="wrapper">），然後將其設置爲position:absolute;在CSS。這個wouls重疊圖像上的文字，但是當我重新調整窗口的大小時，文字會溢出背景。它不受父div（wrapper）的限制。我認爲它會保持在包裝div，因爲我認爲它應該是它的父母。

它也漂浮，它與圖像或圖像中的div完全斷開。

問題： 所以我的問題是我應該怎麼做，而不是（保持響應）？

代碼： 這裏是的jsfiddle： this is the original code和 this is what I tried to do（嘗試調整窗口的大小..它不好看）

例子： * 附： *爲了更好地理解我想實現的目標，請看this page，您可以在其中看到文本在可重新調整大小的背景上保持其位置和比例。（嘗試重新調整您的瀏覽器窗口）

來源

2014-03-27 Danny

在你的的jsfiddle CSS刪除position: fixed;

#content{ 
     width: 75%; 
     position: fixed; 
     /*Remove this line from CSS (Line number 40 in jsfiddle CSS of your code)*/ 
     padding: 1%; 
     padding-top: 30%; 
    }

來源

2014-03-27 12:12:21 Rohit

嗨，如果我這樣做的所有文字去的形象下，因此它並不真正使用圖像作爲背景。 – Danny

我不想將文字放在圖像下方。它必須使用圖像作爲文本的背景。我試圖用position：fixed;和位置：絕對;但是當我調整窗口大小時，它會弄亂佈局（文字遍歷圖像的邊緣等等） – Danny

爲什麼不直接使用圖像作爲真正的CSS'background-image'？ – KittMedia

如何在響應佈局中將背景圖像上的元素設置爲

回答

相關問題