إشكال في فهم طريقة عمل خاصية position-y ؟

وعليكم السلام 

عند ملاحظة التنسيقات أرى أنك مستخدم تدرج لوني كخلفية بقيمة الخاصية التالية 

 background-image: linear-gradient(#fff 50%, #2176fd 50%);

لذلك عند إعطاء القيمة 2,5%  للخاصية background-position نلاحظ حدثت إزاحة gradient مما تسبب ظهور اللون الأزرق المعطى كخلفية . 

لتعامل مع تنسيقات الخلفيات في css يمكنك الاطلاع على المقالة التالية:-

يوجد في موسوعة حسوب عدّة شروحات حول الخاصيات التالية: position و background-position و background-image . 

هذا ما لاحظته لسبب ظهور اللون الأزرق من الصورة المرفقة ، لو أمكنك إرفاق الكود الذي به المشكلة لرؤيته بوضوح حتى أستطيع مساعدتك . 

بتاريخ 3 دقائق مضت قال أسامة زيادة:

وعليكم السلام 

عند ملاحظة التنسيقات أرى أنك مستخدم تدرج لوني كخلفية بقيمة الخاصية التالية 

 background-image: linear-gradient(#fff 50%, #2176fd 50%);

لذلك عند إعطاء القيمة 2,5%  للخاصية background-position نلاحظ حدثت إزاحة gradient مما تسبب ظهور اللون الأزرق المعطى كخلفية . 

لتعامل مع تنسيقات الخلفيات في css يمكنك الاطلاع على المقالة التالية:-

يوجد في موسوعة حسوب عدّة شروحات حول الخاصيات التالية: position و background-position و background-image . 

هذا ما لاحظته لسبب ظهور اللون الأزرق من الصورة المرفقة ، لو أمكنك إرفاق الكود الذي به المشكلة لرؤيته بوضوح حتى أستطيع مساعدتك . 

أعرف أن الإزاحة وقعت لكن من المفروض أن تحدث الإزاحة من الأعلى و هذا -حسب ما أظن- سيزيح تدرج الألوان بإتجاه الأسفل, و هذا -حسب ما يبدو لي- لن يجعل الجزء الأزرق يظهر, لكنه ظهر

بتاريخ 17 دقائق مضت قال مصطفى اوريك:

أعرف أن الإزاحة وقعت لكن من المفروض أن تحدث الإزاحة من الأعلى و هذا -حسب ما أظن- سيزيح تدرج الألوان بإتجاه الأسفل, و هذا -حسب ما يبدو لي- لن يجعل الجزء الأزرق يظهر, لكنه ظهر

لا أعلم التنسيقات الأخرى المعطى للكلاس لكن هنا في الحالة لديك تتم الإزاحة من الأسفل كون أن قيم الخاصية background-position كالتالي 0 من الشمال (left) و %2.5 من الأسفل (bottom). 

في حال أردت الإزاحة من الأعلى يمكنك تنفيذها بهذا الشكل 

background-position: left 0 top 2.5%;

يمكنك من الإطلاع حول الخاصية background-position من هنا