كيفية إنشاء: تحديد موقع النص داخل الصورة

تعلم كيفية وضع النص على الصورة.

كيفية وضع النص داخل الصورة

الخطوة الأولى - إضافة HTML:

<div class="container">
  <img src="img_snow_wide.jpg" alt="Snow" style="width:100%;">
  <div class="bottom-left">الجزء السفلي اليسرى</div>
  <div class="top-left">الجزء العلوي اليسرى</div>
  <div class="top-right">الجزء العلوي الأيمن</div>
  <div class="bottom-right">الجزء السفلي الأيمن</div>
  <div class="centered">مركز</div>
</div>

الخطوة الثانية - إضافة CSS:

/* وحدة تحتوي على الصورة والنص */
.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