خلفيات CSS
تُستخدم خصائص الخلفية في CSS لإضافة تأثيرات الخلفية للعناصر.
في هذه الفصول ، ستتعرف على خصائص خلفية CSS التالية:
-
background-color -
background-image -
background-repeat -
background-attachment -
background-position -
background(خاصية الاختزال)
لون الخلفية CSS
تحدد الخاصية لون background-colorخلفية العنصر.
مثال
يتم تعيين لون خلفية الصفحة على النحو التالي:
body {
background-color: lightblue;
}
باستخدام CSS ، يتم تحديد اللون غالبًا بواسطة:
- اسم لون صالح - مثل "أحمر"
- قيمة HEX - مثل "# ff0000"
- قيمة RGB - مثل "rgb (255،0،0)"
انظر إلى CSS Color Values للحصول على قائمة كاملة بقيم الألوان الممكنة.
عناصر أخرى
يمكنك ضبط لون الخلفية لأي من عناصر HTML:
مثال
هنا ، سيكون لعناصر <h1> و <p> و <div> ألوان خلفية مختلفة:
h1 {
background-color: green;
}
div {
background-color: lightblue;
}
p {
background-color:
yellow;
}
العتامة / الشفافية
opacityتحدد الخاصية عتامة / شفافية العنصر . يمكن أن تأخذ قيمة من 0.0 إلى 1.0. كلما قلت القيمة ، زادت شفافية:
العتامة 1
عتامة 0.6
العتامة 0.3
العتامة 0.1
مثال
div {
background-color: green;
opacity: 0.3;
}
ملاحظة: عند استخدام opacityالخاصية لإضافة الشفافية إلى خلفية عنصر ما ، فإن جميع العناصر الفرعية ترث نفس الشفافية. يمكن أن يؤدي ذلك إلى صعوبة قراءة النص الموجود داخل عنصر شفاف بالكامل.
الشفافية باستخدام RGBA
إذا كنت لا تريد تطبيق العتامة على العناصر الفرعية ، كما في المثال أعلاه ، فاستخدم قيم ألوان RGBA . يضبط المثال التالي عتامة لون الخلفية وليس النص:
100٪ عتامة
60٪ عتامة
30٪ عتامة
10٪ عتامة
لقد تعلمت من CSS Colors Chapter أنه يمكنك استخدام RGB كقيمة لونية. بالإضافة إلى RGB ، يمكنك استخدام قيمة لون RGB مع قناة ألفا (RGB A ) - والتي تحدد عتامة اللون.
يتم تحديد قيمة ألوان RGBA بـ: rgba (أحمر ، أخضر ، أزرق ، ألفا ). معامل ألفا هو رقم بين 0.0 (شفاف بالكامل) و 1.0 (معتم بالكامل).
نصيحة: سوف تتعلم المزيد عن ألوان RGBA في فصل ألوان CSS الخاص بنا .
مثال
div {
background: rgba(0, 128, 0, 0.3) /* Green background with 30% opacity */
}