చిత్రంపై పాఠం బ్లాక్ సృష్టించడం ఎలా

చిత్రంపై పాఠం బ్లాక్ ఎక్కించడం ఎలా నేర్చుకోండి

చిత్రంలో పాఠం బ్లాక్ ఎక్కించండి ఎలా

మొదటి దశ - HTML జోడించండి:

<div class="container">
  <img src="nature.jpg" alt="నార్వే" 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 定位