الخلفيات (Backgrounds) فى CSS
سنتناقش فى هذا الفصل جميع أنواع الخلفيات (Backgrounds) فى CSS بالتفصيل، مع بعض الأمثلة التوضيحية.
الخلفيات فى CSS
1. CSS background-color
تستخدم خاصية الـ background-color لتحديد لون خلفية العنصر. كالتالى:
<style> .demo { background-color: green; color: white; } </style> <h2 class="demo">CSS Backgrounds</h2>
CSS Backgrounds
يمكنك تحديد قيمة اللون بأكثر من طريقة:
- إسم اللون مباشرًا، مثل: “black“.
- RGB، مثل : “(rgb(0, 0, 0“.
- HEX، مثل: “000#“.
مثال للتوضيح:
h2 { background-color: black; /* Outputs = black */ } h2 { background-color: rgb(0, 0, 0); /* Outputs = black */ } h2 { background-color: #000; /* Outputs = black */ }
2. CSS background-image
تستخدم خاصية background-image لتحديد صورة لخلفية العنصر. بشكل افتراضي، يتم تكرار الصورة بحيث تغطي العنصر بالكامل. كالتالى:
div { background-image: url("image.jpg"); height: 250px; width: 100%; }
3. CSS background-repeat
بشكل افتراضي، يتم تكرار خاصية background-image أفقياً horizontally ورأسياً vertically.
فى بعض الأوقات قد تحتاج إلى تكرار بعض الصور أفقيًا أو رأسيًا، كالتالى:
div { background-image: url("image.jpg"); background-repeat: repeat-x; height: 250px; width: 100%; }
فى حالة عدم إحتياجك إلى تكرار الخلفية نهائيًا، يمكنك إستخدام خاصية (background-repeat: no-repeat)، كالتالى:
div { background-image: url("image.jpg"); background-repeat: no-repeat; height: 250px; width: 100%; }
4. CSS background-position
يتم استخدام خاصية background-position لتحديد موضع أو مكان صورة الخلفية. كالتالى:
div { background-image: url("image.jpg"); background-repeat: no-repeat; background-position: left bottom; height: 250px; width: 100%; }
5. CSS background-attachment
تحدد خاصية background-attachment إذا كان يجب تمرير/ثبات صورة الخلفية. كالتالى:
div { background-image: url("image.jpg"); background-repeat: no-repeat; background-attachment: fixed; /* Must be Fixed */ background-position: top left; height: 250px; width: 100%; }
div { background-image: url("image.jpg"); background-attachment: scroll; /* Must be scroll */ height: 250px; width: 100%; }
6. CSS background
الخاصية background عبارة عن اختصار يقوم بتعيين الخصائص التالية في إعلان CSS واحد أو كـ دفعة واحده. بدلًا من القيام بذلك:
div { background-image: url("image.jpg"); background-repeat: no-repeat; background-position: left bottom; background-color: #f00; }
يمكنك تنفيذ كل التنسيقات السابقة فى سطر واحد، كالتالى:
div { background: #f00 url("image.jpg") no-repeat left bottom; }
عند استخدام خاصية الـ background المختصرة، لازم يكون ترتيب قيم الخاصية كما يلي:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position.
الإبلاغ عن خطأ
×إذا وجد خطأ وتريد الإبلاغ عن هذا الخطأ، أو إذا كنت تريد تقديم اقتراح على شىء معين، فلا تتردد في إرسال بريد إلكتروني إلينا:
info@albashmoparmeg.com
شكرًا لك على مساعدتك لنا!