الخلفيات في css ~ وهج المعرفة

الخلفيات في cssc_css

في هدا الدرس سنتطرق للخلفيات في لغة الأنماط الإنسيابية css

في هدا الدرس سنتطرق للخلفيات في لغة الأنماط الإنسيابية css و كيفية جعل الخلفية عبارة عن لون أو صورة و كدا التحكم بحجمها و موضعها و أبعادها

و كيفية جعل الخلفية عبارة عن لون أو صورة و كدا التحكم بحجمها و موضعها

I - الخاصية العامة background

الخاصية background هي الأساسية في css لتحديد الخلفية .و كغيرها من الخصائص تندرج تحتها مجموعة من الخصائص الفرعية كالتالي

قبل شرح الخائص الفرعية دعونا نتفحص الخاصية العامة background

يمكن إختزال معضم الخاصيات الفرعية في هده الخاصية و دلك بتمرير قيمة أو أكثر إليها

// Example 1 background: #0ae ; // Example 2 background: url(roses.png) ; // Example 3 background: #0ae url(roses.png) ; // Example 4 background: #0ae url(roses.png) no-repeat; // Example 5 background: #0ae url(roses.png) no-repeat center;

الأمثلة التالية هي نتاج الكود أعلاه بالترتيب

1 تحديد لون للخلفية

2 إعتماد صورة كخلفية للعنصر

3 إعتماد لون و صورة كخلفية للعنصر

4 إعتماد لون و صورة كخلفية دون تكرار

5 إعتماد لون و صورة دون تكرار مع توسيط الصورة

يمكن إعتماد لون متدرج كخلفية عن طريق linear-gradient

background: linear-gradient(200deg, #f00, #0f0);

النتيجة

المعطى الأول 200deg هو زاوية إتجاه التدرج اللوني

يمكن ببساطة إهمال هدا المعطى ليكون الإتجاه الإفتراضي هو من الأعلى إلى الأسفل

يمكن إدراج أكثر من لون مع تحديد موقع التركيز لكل لون على حدى بإستخدام النسبة المئوية لإتجاه التدرج

مثال

background: linear-gradient( #f00 0%, #0f0 11%, #00f 60%);

النتيجة

أو يمكن إستخدام التدرج الشعاعي radial-gradient ليكون الناتج بهدا الشكل

الكود المستخدم

background: radial-gradient(circle, #f00 0%, #0f0 11%, #00f 60%);

يمكن إهمال القيمة circle أو إستبدالها بــ ellipse ليكون التدرج الشعاعي إهليجي الشكل ( حسب أبعاد العنصر )

II - الحجم background-size

إفتراضيا تظهر صورة الخلفية بحجمها الأصلي
و يمكن التحكم بحجمها عن طريق background-size

background: #0ae url(roses.png) no-repeat center; background-size:200px;

يمكن إدراج النسبة المئوية ك 100% ليكون حجم صورة الخلفية مساويا لحجم العنصر
أو يمكن إدراج قيمتين للتحكم بالعرض و الإرتفاع على التوالي

III - نمط التمرير background-attachment

تعمل هده الخاصية إدا كان العنصر المحدد هو body
إدا تم إعطاء القيمة fixed للخاصية فإن صورة الخلفية للصفحة ستبقى تابثة في مكانها و لن تتأتر بالتمرير ( scrolling )

IV - الإمتداد background-clip

تستخدم هده الخاصية لتحديد المدى اللدي ستشغله الخلفية
في هدا المثال سندرج content-box ليكون مدى الخلفية هو ما يمكن أن أن تتضمنه من محتوى إستنادا إلى المحاداة padding

padding:16px; background: #0ae ; background-clip: content-box;

النتيجة

يمكن إختيار القيم لهده الخاصية بين border-box . padding-box و content-box

النتائج

V - نمط المزج / التأتير background-blend-mode

تعطي هده الخاصية لصورة الخلفية تأثيرا مختلفا مع كل مدخل
الصور التالية تستعرض هده التأتيرات

VI - موقع صورة الخلفية background-position

إدا أخدت هده الخاصية معطى واحد فسيكون هو نفسه موقع صورة الخلفية عرضا و إرتفاعا و إدا أخدت معطيين إتنين فسيكون الأول للعرض و التاني للإرتفاع

مثال

background-position:right 75%;

النتيجة

يمكن أن تأخد هده الخاصية قيمة بكسلية أو نسبة مئوية أو right , left , top , bottom , center

إنتهى الدرس

aa-- --bb jjjjjjjjjjjjj

الصفحة السابقة الصفحة التالية

تواصل

يوتيوب فيسبوك إنستغرام