कैसे करें - छवि पर टेक्स्ट ब्लॉक
छवि पर टेक्स्ट ब्लॉक लगाने का तरीका जानें।
छवि पाठ ब्लॉक
इमेज में टेक्स्ट ब्लॉक कैसे लगाएं
चरण 1) HTML जोड़ें:
उदाहरण
<div class="container">
<img src="nature.jpg" alt="Norway"
style="width:100%;">
<div class="text-block">
<h4>Nature</h4>
<p>What a beautiful sunrise</p>
</div>
</div>
चरण 2) सीएसएस जोड़ें:
उदाहरण
/* Container holding the image and the text */
.container {
position: relative;
}
/* Bottom right text */
.text-block {
position: absolute;
bottom: 20px;
right: 20px;
background-color: black;
color: white;
padding-left: 20px;
padding-right: 20px;
}
इमेज को स्टाइल करने के तरीके के बारे में अधिक जानने के लिए, हमारे CSS इमेज ट्यूटोरियल को पढ़ें।
CSS पोजिशनिंग के बारे में अधिक जानने के लिए, हमारा CSS पोजिशन ट्यूटोरियल पढ़ें।