CSS

CSS Background Color
خلفية لون في لغة CSS

ستتعلم في هذا الدرس كيفية إضافة خلفيات لون لعناصر HTML أو لصفحة الويب بلغة CSS وستتعرف علي خاصية bakcground والقيم التي تُعين لها في CSS.

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

4247

المواضيع

24
الشروحات chevron_left CSS Background Color chevron_left CSS

CSS Background Color
خلفية لون في لغة CSS

</> CSS Backgrounds
خلفية لون في لغة CSS

تستخدم خاصية background-color property في لغة CSS في التحكم في خلفية أي عنصر في ملف HTML وتغيير لونة من الألوان الأفتراضية إلي أي لون اخر.

background-color property: 
  • قيمة خاصية background-color يمكن أن تكون hex color أو RGB color أو color name.
  • يمكن تعيين لون شفاف عن طريق RGBA color.
  • الخلفيات يتم إضافتها علي مساحة العنصر بالكامل وتشمل جميع الفراغات الداخلية padding.


قيم خاصية background-color property:

  • color إضافة اللون مباشرة  hex color أو RGB color أو color name.
  • transparent سوف يصبح العنصر بخلفية شفافة وستظهر خلفية عنصر الأب parent االعنصر الزي يتفرع منه.
  • inherit سوف يورث العنصر الخلفية من الأب parent العنصر الزي يتفرع منه.
background color syntax

طريقة كتابة خاصية background color.

h1
{
background-color:value;
}

</> CSS background-color with color name
خاصية background-color والقيمة color name في لغة CSS

إستخدام color name مع خاصية background-color في لغة CSS وهي طريقة كتابة إسم اللون مباشرة red,green,blue.
background-color syntax

طريقة إستخدام color name مع خاصية background-color.

background-color:yellow;
set h1 background color

إضافة خلفية لعنصر h1 بلغة CSS.

h1 
{
background-color:yellow;
}
body background color

إضافة خلفية لعنصر body بلغة CSS.

body
{
background-color:pink;
}

</> CSS background-color with transparent
خاصية background-color والقيمة transparent في لغة CSS

إستخدام transparent كقيمة مع خاصية background-color في لغة CSS وهي طريقة تعيين خلفية شفافة وهي توضح لون خلفية العنصر الأب parent Element.
background color transparent

تظهر خلفية العنصر خلفية العنصر الخلفي وهو parent.

body
{
background-color:pink;
}

h1
{
background-color:transparent;
}

</> CSS background-color with opacity
خاصية background-color والقيمة opacity في لغة CSS

إستخدام opacity كقيمة مع خاصية background-color في لغة CSS وهي طريقة تعيين خلفية شفافة ومُتدرجة وهي توضح لون خلفية العنصر الأب parent Element.

  • أقل قيمة للشافية هي 0.1 وأعلي قيمة هي 1.
background color opacity

اللون الأزرق شفاف مُتدرج تقل درجة وضوح الخلفية بنسبة 50% مع opacity.

h1
{
background-color:blue;
opacity: 0.5;
}
ملاحظة
عندما تُستخدم خاصية opacity مع background color فأن العنصر يقل شفافيتة بجميع المحتويات الداخلية كالنصوص والعناصر الداخلية.

</> CSS background-color with RGB
خاصية background-color والقيمة RGB في لغة CSS

إستخدام RGB كقيمة مع خاصية background-color في لغة CSS وهي طريقة تعيين خلفية للعنصر عن طريق RGB وليس color name أو hex color.

background color RGB

تعيين خلفية بأستخدام قيمة RGB بدلاً من color name.

body
{
background-color: rgb(0, 255, 0);
}

</> CSS background-color with RGBA
خاصية background-color والقيمة RGBA في لغة CSS

إستخدام RGBA كقيمة مع خاصية background-color في لغة CSS وهي طريقة تعيين خلفية للعنصر وتعديل درجة الشفافية عن طريق RGBA.

background color RGBA

تعيين خلفية بأستخدام قيمة RGB بدلاً من color name.

body
{
background-color: rgb(255, 0, 0,0.5);
}

</> CSS background-color with hex color
خاصية background-color والقيمة hex color في لغة CSS

إستخدام hex color كقيمة مع خاصية background-color في لغة CSS وهي طريقة تعيين خلفية للعنصر عن طريق hex code.

background color hex

تعيين خلفية بأستخدام قيمة hex بدلاً من color name.

body
{
background-color:#00ff00;
}

</> CSS background-color with inherit
خاصية background-color والقيمة inherit في لغة CSS

إستخدام inherit كقيمة مع خاصية background-color في لغة CSS وهي طريقة تعيين خلفية للعنصر عن طريق الوراثه من العنصر الأب parent  طريق inherit.

background color inherit

تعيين خلفية بأستخدام قيمة inherit بدلاً من color name.

body
{
background-color: pink;
}

h1
{
background-color: inherit;
}

p
{
background-color: red;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات