انتقل إلى محتوى الدرس
ابدأ رحلتك
الدرس 25
دورة لغة CSS

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

ستتعلم في هذا الدرس كيفية إضافة خلفيات لون لعناصر HTML أو لصفحة الويب بلغة CSS وستتعرف علي خاصية bakcground والقيم التي تُعين لها في CSS.
ابدأ التعلّم استكشف الأمثلة
أقسام الدرس
8
الأمثلة
10
اللغة
العربية
تاريخ النشر
غير محدد
المشاهدات
8,036
محتوى الدرس
في هذا الدرس 8تصفّح المواضيع

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.

HTML 
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.

HTML 
background-color:yellow;

set h1 background color

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

HTML 
h1 
{
background-color:yellow;
}
جرّب بنفسك

body background color

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

HTML 
body
{
background-color:pink;
}
جرّب بنفسك

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

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

background color transparent

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

HTML 
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.

HTML 
h1
{
background-color:blue;
opacity: 0.5;
}
جرّب بنفسك

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

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

background color RGB

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

HTML 
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.

HTML 
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.

HTML 
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.

HTML 
body
{
background-color: pink;
}

h1
{
background-color: inherit;
}

p
{
background-color: red;
}
جرّب بنفسك

مشاركة

هل كان هذا الدرس مفيدًا؟

جارٍ تحميل الآراء…

ابنِ لغتك البرمجية

المصطلحات8

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 8 مفهومةأول بطاقة، أول خطوة
01 Background Color لون الخلفية
للمراجعة
02 Elements عناصر
للمراجعة
03 Property خاصية
للمراجعة
04 Color Name اسم اللون
للمراجعة
05 Transparency الشفافية
للمراجعة
06 Opacity شفافية
للمراجعة
07 Value قيمة
للمراجعة
08 Using بإستخدام
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

حروف قليلة. معنى كامل.

الاختصارات4

راجع المعنى، اشرحه لنفسك، ثم علّم البطاقة كمفهومة.

0 / 4 مفهومةأول بطاقة، أول خطوة
01 CSS CSS
Cascading Style Sheets
صفحات الأنماط الانسيابية
للمراجعة
02 HTML HTML
Hypertext Markup Language
لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت<p><a href="https://www.closetag.com/tutorial/html/html-introduction">المزيد عن HTML</a></p>
للمراجعة
03 Hex Hex
Hexadecimal
أرقام سداسية عشرية
للمراجعة
04 RGB RGB
Red، Green، Blue
أحمر , أخضر , أزرق
للمراجعة

اقرأ البطاقات بحرية. سجّل الدخول لحفظ تقدم مراجعتك.

مساحة التحدي

اختبر فهمك.
ووصلها للإتقان.

كل سؤال خطوة لقدّام. اختار، اكتب كود، وشوف نتيجتك فورًا.

4أسئلة 2أنواع تحديات 100%هدف الإتقان
تصحيح تلقائي. فرص بلا حدود.

أكمل المهام، واجمع كل الإجابات الصحيحة. أقل من 100%؟ راجع وأعد المحاولة.

الأسئلة متاحة للاطلاع. سجّل الدخول للتفاعل وحفظ تقدمك.

لمحة عن التحدي4 أسئلة تنتظرك
01

ماهي الخاصية التي تستخدم في ال CSS لتحديد لون خلفية العناصر ؟

02

في ماذا تستخدم ال Opacity في ال CSS ؟

03

هل يمكننا استخدام ال Opacity مع نظام الالوان التالي (RGBA)

04

ما هو المعدل الذي يتراوح خلاله قيمة ال Opacity ؟