چگونه ایجاد کنیم: متنی را روی تصویر قرار دهیم

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

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

مرحله اول - اضافه کردن HTML:

<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>

مرحله دوم - اضافه کردن CSS:

/* محفظه‌ای که شامل تصاویر و متون است */
.container {
  پوزیشن: نسبی;
  جذب‌کننده‌ی متنی: وسط;
  رنگ: سفید;
}
/* متنی که در گوشه پایین چپ قرار می‌گیرد */
.bottom-left {
  پوزیشن: تعادلی;
  پایین: 8 پیکسل;
  چپ: 16 پیکسل;
}
/* متنی که در گوشه بالا چپ قرار می‌گیرد */
.top-left {
  پوزیشن: تعادلی;
  بالا: 8 پیکسل;
  چپ: 16 پیکسل;
}
/* متنی که در گوشه بالا راست قرار می‌گیرد */
.top-right {
  پوزیشن: تعادلی;
  بالا: 8 پیکسل;
  راست: 16 پیکسل;
}
/* متنی که در گوشه پایین راست قرار می‌گیرد */
.bottom-right {
  پوزیشن: تعادلی;
  پایین: 8 پیکسل;
  راست: 16 پیکسل;
}
/* متنی که در وسط قرار می‌گیرد */
.centered {
  پوزیشن: تعادلی;
  بالا: 50%;
  چپ: 50%;
  ترنسمفورم: ترنزلیت(-50%, -50%);
}

آپ خود امتحان کنید

مقالات مرتبط

آموزش:}}تصاوير CSS

آموزش:}}تعيين مکان CSS