एचटीएमएल में छवियों पर पाठ कैसे डालें?

Question

HTML में छवियों पर टेक्स्ट कैसे डालें। हर बार जब मैं नीचे कोड दर्ज करता हूं, तो टेक्स्ट छवि के नीचे जाता है।

<img src="example.jpg">Text</img> 

Answer 1

<img> element is empty - इसमें कोई अंत टैग नहीं है।

यदि छवि a background image, use CSS है। यदि यह एक सामग्री छवि है, तो एक कंटेनर पर position: relative सेट करें, फिर absolutely position छवि और/या इसके भीतर पाठ।

Answer 2

आपको अपेक्षाकृत-स्थित img टैग पर पूरी तरह से स्थित सीएसएस का उपयोग करने की आवश्यकता है। आलेख Text Blocks Over Image एक छवि पर पाठ रखने के लिए एक चरण-दर-चरण उदाहरण देता है।

Answer 3

आप छवि के समान आकार के साथ एक div बना सकते हैं।

<div class="imageContainer">Some Text</div> 

छवि

.imageContainer { 
     width:200px; 
     height:200px; 
     background-image: url(locationoftheimage); 
} 

more here

टिप्पणी को दिखाने के लिए सीएसएस पृष्ठभूमि छवि संपत्ति का उपयोग करें: इस slichtly अपने दस्तावेज़ के अर्थ विज्ञान छेड़खानी। यदि वास्तविक छवि के स्थान पर div इंजेक्ट करने के लिए आवश्यक जावास्क्रिप्ट का उपयोग करें।

Answer 4

आप इस कोशिश कर सकते हैं ...

<div class="image"> 

     <img src="" alt="" /> 

     <h2>Text you want to display over the image</h2> 

</div> 

सीएसएस

.image { 
    position: relative; 
    width: 100%; /* for IE 6 */ 
} 

h2 { 
    position: absolute; 
    top: 200px; 
    left: 0; 
    width: 100%; 
}