चित्र पर टेक्स्ट ब्लॉक कैसे बनाया जाता है

कैसे चित्र पर टेक्स्ट ब्लॉक लगाया जाता है

कैसे चित्र में टेक्स्ट ब्लॉक लगाया जाता है

पहला कदम - HTML जोड़ें:

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>वुहान</h4>
    <p>एक बहुत अच्छा शहर! मैं इसे पसंद करता हूँ!</p>
  </div>
</div>

दूसरा कदम - CSS जोड़ें:

/* चित्र और टेक्स्ट के कंटेनर */
.container {
  position: relative;
}
/* दायाँ नीचे टेक्स्ट */
.text-block {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding-left: 20px;
  padding-right: 20px;
}

स्वयं आयात करें

संबंधित पृष्ठ

तूरी:CSS इमेज

तूरी:CSS पोजिशनिंग