كيفية وضع النص امام الصورة في html او css

من اجل الكتابة على الصورة نستخدم ما يسمى بالـ hero Image وهي كالتالي :

نضع div ولنسميه hero-image وداخله div آخر ولنسمية hero-text ولنضع داخله النص الخاص بنا.

ونعطي الـ hero-image الخاصية  position: relative ونعطيه طول معين، ونعطيه الخلفية :
background-image:url(myImagePath) و يمكن ان نعطيه طبقة سوداء فاتحة امام الصور كي يظهر النص بشكل جيد كما في المثال القادم بالاسفل.

ونعطي الـ hero-text الخاصية position: absolute فيصبح النص امام الصورة ونتحكم بموضعه بالنسبة للصورة بالخصائص top "والذي يمثل بعد النص عن اعلى الـ hero-image والذي يمثل الصورة" و left "والذي يمثل بعد النص عن يسار الـ hero-image".

لاحظ المثال :

<div class="hero-image">
  <div class="hero-text">
    <h1>I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

body, html {
    height: 100%;
}

/* The hero image */
.hero-image {
  /*   لإضافة طبقة من السواد امام الصورة، وهذا سيجعل النص اسهل للقراءة "linear-gradient" استخدم */
  /* url بعده نضيف الصورة كخلفية */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("photographer.jpg");


  /* بعض الخصائص للصورة لتظهر بشكل مناسبة */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* هذه الخطوتين هم الاهم ولا يجب اهمالهما */
  /* relative خصاية الـ */
  position: relative;
  /* اعط العنصر طول معين */
  height: 50%;
}

/* خصائص النص */
.hero-text {  
  text-align: center;
  
  /* هذه الخاصية هي الاهم */
  position: absolute;
  
  /* هذه الخصائص لتوسيط النص بالنسبة للصورة */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color: white;
}

النتيجة النهائية :

بتاريخ منذ ساعة مضت قال عمر قره محمد:

من اجل الكتابة على الصورة نستخدم ما يسمى بالـ hero Image وهي كالتالي :

نضع div ولنسميه hero-image وداخله div آخر ولنسمية hero-text ولنضع داخله النص الخاص بنا.

ونعطي الـ hero-image الخاصية  position: relative ونعطيه طول معين، ونعطيه الخلفية :
background-image:url(myImagePath) و يمكن ان نعطيه طبقة سوداء فاتحة امام الصور كي يظهر النص بشكل جيد كما في المثال القادم بالاسفل.

ونعطي الـ hero-text الخاصية position: absolute فيصبح النص امام الصورة ونتحكم بموضعه بالنسبة للصورة بالخصائص top "والذي يمثل بعد النص عن اعلى الـ hero-image والذي يمثل الصورة" و left "والذي يمثل بعد النص عن يسار الـ hero-image".

لاحظ المثال :

<div class="hero-image">
  <div class="hero-text">
    <h1>I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

body, html {
    height: 100%;
}

/* The hero image */
.hero-image {
  /*   لإضافة طبقة من السواد امام الصورة، وهذا سيجعل النص اسهل للقراءة "linear-gradient" استخدم */
  /* url بعده نضيف الصورة كخلفية */
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url("photographer.jpg");


  /* بعض الخصائص للصورة لتظهر بشكل مناسبة */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  
  /* هذه الخطوتين هم الاهم ولا يجب اهمالهما */
  /* relative خصاية الـ */
  position: relative;
  /* اعط العنصر طول معين */
  height: 50%;
}

/* خصائص النص */
.hero-text {  
  text-align: center;
  
  /* هذه الخاصية هي الاهم */
  position: absolute;
  
  /* هذه الخصائص لتوسيط النص بالنسبة للصورة */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  
  color: white;
}

النتيجة النهائية 

انا مش عايز الصورة كاخلفية أريدها صورة عادية تكون موجوده فى صفحة html 

بتاريخ 23 دقائق مضت قال Reda Salem:

انا مش عايز الصورة كاخلفية أريدها صورة عادية تكون موجوده فى صفحة html 

يمكنك تنفيذ الكود السابق نفسه مع اضافة التعديلات التالية :

نضيف الصورة داخل العنصر الاب نفسه ولكن خارج العنصر الحاوي على النص،

يحث تصبح الصورة و النص بناء مباشرين للأب الخاص بالـ hero Image.

<div class="hero-image">
  <!-- نضيف الصورة هنا -->
  <img/>
   <!-- ******* -->
  <div class="hero-text">
    <h1>I am John Doe</h1>
    <p>And I'm a Photographer</p>
    <button>Hire me</button>
  </div>
</div>

ونضيف الخصائص التالية للصورة :

وهي مشابهة للخصائص التي يأخذها النص 

img{
  /* الخصائص التالية لجعل طول الصورة وعرضها مماثل لطول وعرض الاب وللمحافظة على ابعادها */
  width:100%;
  height:100%; 
  object-fit: cover;
  /* هذه نفس الخائص التي اعطيناها للنص سابقاً ولكن جعلنا الاتجاه العلوي والايسر منطبق على اعلى وايسر الاب */
  position: absolute;
  top:0;
  left:0;
}

ونضيف لخصائص العنصر hero-text الخاصية التالية :

.hero-text {
  z-index: 5;
  ....
}

لجعل النص امام الصورة

ابحط النص داخل شكل او ايطار شلون ؟

بتاريخ On 2‏/2‏/2023 at 20:53 قال سوسن نور:

ابحط النص داخل شكل او ايطار شلون ؟

عادي استخدمي border-style 

https://harmash.com/tutorials/css/background

في هنا شرح مفيد للحدود