在HTML頁面中的圖像中插入文本

Question

我必須在下面顯示的圖像中插入一些文本。文本已準備就緒，但我不知道從哪裏獲取圖像。此外，我不知道如何插入/放置圖像上的文字。有誰知道我可能會得到這樣的圖像，以及如何插入文本？我在網上環顧四周，但沒有找到太多幫助。我希望我的問題不太含糊。非常感謝。

Answer 1

有幾種可能性。

1. 使用PHP處理圖像。 （您的GD functions的作業）
2. 使用CSS和HTML在圖片上放置文字。
3. 使用CSS和HTML爲文本創建背景圖像。

2.

.background { 
 
    background: url('http://www.1stwebdesigner.com/wp-content/uploads/2011/03/paper-note-background4.jpg') no-repeat top left transparent; 
 
    position: relative; 
 
    width: 570px; 
 
    height: 264px; 
 
} 
 
.text { 
 
    position: absolute; 
 
    left: 90px; 
 
    top: 80px; 
 
}

<div class="background"> 
 
    <span class="text">Give me burger</span> 
 
</div>

3.

.background { 
 
    background: url('http://www.1stwebdesigner.com/wp-content/uploads/2011/03/paper-note-background4.jpg') no-repeat top left transparent; 
 
    position: relative; 
 
    width: 480px; 
 
    height: 284px; 
 
    padding-left: 90px; 
 
    padding-top: 80px; 
 
}

<div class="background">Give me burger</div>

Answer 2

試試這個：

你需要把你的文本放在另一個div中，並使這個div重疊保存圖像的div。

<a href="http://css-tricks.com/3118-text-blocks-over-image/" target="_blank">Inspiré de CSS-Tricks</a> 
<div class="fiddle"> 
    <div class="content"> 
     <h4>CSS LavaLamp nav</h4> 
     <p class="date">Novembre 2011</p> 
    </div> 
</div> 

http://jsfiddle.net/aNUjB/14/