ছবিতে টেক্সট ব্লক তৈরি করা কিভাব

কিভাবে ছবিতে টেক্সট ব্লক স্থাপন করতে শিখুন

ছবির টেক্সট ব্লক

উহান

উহান

What a great city! I love it!

আপনাদের নিজেরাই চেষ্টা করুন

কিভাবে ছবিতে টেক্সট ব্লক স্থাপন করা যায়

প্রথম পদক্ষেপ - এইমএল (HTML) যোগ করুন

<div class="container">
  <img src="nature.jpg" alt="Norway" style="width:100%;">
  <div class="text-block">
    <h4>Wuhan</h4>
    <p>What a great city! I love it!</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 定位