CSS

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

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

التاريخ

09 نوفمبر 2020

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2394

المواضيع

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

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;
}
مصطلحات الدرس
Background Color
Background Color

لون الخلفية

Elements
Elements

عناصر

Property
Property

خاصية

Color Name
Color Name

اسم اللون

Transparency
Transparency

الشفافية

Opacity
Opacity

شفافية

Value
Value

قيمة

Using
Using

بإستخدام

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
Hex
Hex

Hexadecimal

أرقام سداسية عشرية
RGB
RGB

Red، Green، Blue

أحمر , أخضر , أزرق
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات