Reda Salem نشر 19 أغسطس 2022 أرسل تقرير مشاركة نشر 19 أغسطس 2022 اريد معرفة كيفية الكتابة على صورة معينه من خلال html او css 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 عمر قره محمد نشر 19 أغسطس 2022 أرسل تقرير مشاركة نشر 19 أغسطس 2022 من اجل الكتابة على الصورة نستخدم ما يسمى بالـ 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; } النتيجة النهائية : 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 Reda Salem نشر 19 أغسطس 2022 الكاتب أرسل تقرير مشاركة نشر 19 أغسطس 2022 بتاريخ منذ ساعة مضت قال عمر قره محمد: من اجل الكتابة على الصورة نستخدم ما يسمى بالـ 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 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 عمر قره محمد نشر 19 أغسطس 2022 أرسل تقرير مشاركة نشر 19 أغسطس 2022 بتاريخ 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; .... } لجعل النص امام الصورة 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 سوسن نور نشر 2 فبراير 2023 أرسل تقرير مشاركة نشر 2 فبراير 2023 ابحط النص داخل شكل او ايطار شلون ؟ اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 محمد ايهاب4 نشر 18 مارس أرسل تقرير مشاركة نشر 18 مارس بتاريخ On 2/2/2023 at 20:53 قال سوسن نور: ابحط النص داخل شكل او ايطار شلون ؟ عادي استخدمي border-style https://harmash.com/tutorials/css/background في هنا شرح مفيد للحدود اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
Reda Salem
اريد معرفة كيفية الكتابة على صورة معينه من خلال html او css
رابط هذا التعليق
شارك على الشبكات الإجتماعية
5 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.