چگونه ایجاد می‌شود: بلوک متنی روی تصویر

آموزش چگونه متن بلوک را روی تصویر قرار دهیم.

چگونه متن بلوک را در تصویر قرار دهیم

مرحله اول - اضافه کردن 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