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

কিভাবে ছবিতে টেক্সট স্থাপন করার জন্য শিক্ষা নিন

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

প্রথম পদক্ষেপ - এইচটিএমএল যোগ করুন:

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">Bottom Left</div>
  <div class="top-left">Top Left</div>
  <div class="top-right">Top Right</div>
  <div class="bottom-right">Bottom Right</div>
  <div class="centered">Centered</div>
</div>

দ্বিতীয় পদক্ষেপ - সিএসএস যোগ করুন:

/* ছবি এবং টেক্সট নিয়ে কনটেনার */
.container {
  position: relative;
  text-align: center;
  color: white;
}
/* বাম নিচের কোন্ঠা টেক্সট */
.bottom-left {
  position: absolute;
  bottom: 8px;
  left: 16px;
}
/* বাম উপরের কোন্ঠা টেক্সট */
.top-left {
  position: absolute;
  top: 8px;
  left: 16px;
}
/* ডান উপরের কোন্ঠা টেক্সট */
.top-right {
  position: absolute;
  top: 8px;
  right: 16px;
}
/* ডান নিচের কোন্ঠা টেক্সট */
.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}
/* মধ্যবর্তী চিহ্নিত টেক্সট */
.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

স্বয়ং প্রয়োগ করুন

সংশ্লিষ্ট পৃষ্ঠা

教程：CSS ছবি

教程：CSS 定位