如何在html中的圖像上寫文字

是否可以使用html或javascript在圖像上書寫文字。如何在html中的圖像上寫文字

我已經這樣做了

創建了EM標籤，並創建裏面的跨度和現在我們可以寫跨度任何文字和調整EM標籤，使得看上去在圖像的位置。將em標籤的z-index設置爲較大值，然後是圖像。然後看起來文字是寫在圖像上的。

但我想提供一個訪問者可以編輯文本的選項。我怎麼能做到這一點？

代碼示例： -

$("#em1").html("<p><span>Hi I am</span><br> 
<span> Trying to </span><br><br> 
<span> To write text</span></p>"); 


#em1{ 
    display: block; 
    /*border: 1px solid black;*/ 
    position: absolute; 
    top: 160px; 
    right: 145px; 
    z-index : 10; 
}

我使用的背景（空白，沒有寫在上面）圖像

來源

2012-04-26 sachinjain024

添加一些你試過的代碼？這樣我們可以更好地幫助 – 2012-04-26 12:30:22

將圖像用作'textarea'的'background-image'。但是，你的意思是說文本實際上成爲圖像的一部分？ – 2012-04-26 12:31:27

你可以用contenteditable做到這一點。 – 2012-04-26 12:32:13

設置em元素的contenteditable屬性。您可能需要向用戶通知可用性，因爲人們通常不會期望它，並且在視覺外觀中沒有任何暗示它的東西。

來源

2012-04-26 12:33:06

謝謝你告訴我這個。讓我試試，我會回來的結果 – sachinjain024 2012-04-26 12:39:36

謝謝Jukka K. Korpela。它的工作非常好。非常感謝 – sachinjain024 2012-04-26 12:44:24

對於這種特性的一個很好的做法是，圖紙是在服務器端完成。如果您確實需要使用客戶端，請使用HTML5畫布。

如果您需要保存圖像，請閱讀這篇文章： http://www.nihilogic.dk/labs/canvas2image/

來源

2012-04-26 12:32:27

請再次閱讀這個問題，並想想你的答案。他沒有向圖片中添加文字，只是在圖片上方顯示文字而已。 – 2012-04-26 12:36:07

你可以有一個textarea

<textarea class='abc' >Hello Boys</textarea>

適用於它一些CSS。

 
.abc{ 

background: url('http://www.bzfusion.net/skymaps/sky_englishspring.jpg') no-repeat; background-color:red; width:300px;
 height:500px; }

來源

2012-04-26 12:50:49

謝謝sushil.I喜歡這個想法。這也是很好的答案 – sachinjain024 2012-04-26 12:58:04

如何在html中的圖像上寫文字

回答

相關問題