خلفية CSS مقابل لون الخلفية

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

في هذا الدليل ، سنتعرف على الفرق بين خصائص لون الخلفية والخلفية بالتفصيل.

لنبدأ!

خاصية خلفية CSS

لضبط خلفية أي عنصر HTML ، فإن CSS ' معرفتي 'الممتلكات المستخدمة. إنها خاصية مختصرة لثماني خصائص أخرى مما يعني أنه يمكنك استخدامها جميعًا في سطر واحد. هذه الخصائص الأخرى هي:

لون الخلفية
الصورة الخلفية
خلفية الموقف
حجم الخلفية
تكرار الخلفية
أصل الخلفية
مقطع الخلفية
مرفق الخلفية

بناء الجملة

فيما يلي بناء جملة خاصية الخلفية:

الخلفية: موضع / حجم الصورة الملونة ، مرفق مقطع الأصل المتكرر

دعنا ننتقل إلى شرح جميع الخصائص المذكورة أعلاه واحدة تلو الأخرى.

خاصية لون الخلفية في CSS

باستخدام ' لون الخلفية '، يمكنك ضبط لون الخلفية. سيظهر اللون خلف عناصر HTML.

بناء الجملة

بناء جملة خاصية لون الخلفية هو:

لون الخلفية : اللون

في مكان ' اللون '، يمكنك ضبط لون الخلفية التي تريد أن تظهر خلف العناصر.

مثال

أولاً ، في ملف HTML ، سننشئ حاوية باستخدام علامة

ثم نضيف عنوانًا وفقرة.

لغة البرمجة

< شعبة >

< h1 > LinuxHint < / h1 >

< ص > أهلا في موقعنا < / ص >

< / شعبة >

في CSS ، سنضبط ارتفاع div كـ ' 100٪ 'لإظهاره على الصفحة بأكملها وحجم خط النص كـ' xx- كبير '. بعد ذلك ، اضبط لون الخلفية على ' أكوا '.

CSS

شعبة {

ارتفاع : 100٪ ؛

حجم الخط : xx- كبير ؛

لون الخلفية : أكوا ؛

}

في الصورة الموضحة أدناه ، يمكنك رؤية تطبيق لون الخلفية:

خاصية صورة الخلفية في CSS

ال ' الصورة الخلفية 'لتعيين صورة واحدة أو أكثر كخلفية لعناصر HTML. يمكنك استخدام هذه الخاصية لإضافة صور خلفية مختلفة لعناصر مختلفة.

بناء الجملة

بناء جملة خاصية صورة الخلفية هو:

صورة الخلفية: url ()

هنا ، أعط مسار الصورة التي تريد تعيينها كخلفية كوسيطة لـ ' عنوان url () '.

مثال

استمرارًا للمثال السابق ، أضف صورة خلفية في ' شعبة ' صف دراسي. سنضيف عنوان url للصورة كـ ' url (img.jpg) ':

شعبة {

...

الصورة الخلفية : عنوان url ( img.jpg ) ؛

}

يشير الناتج أدناه إلى أنه تمت إضافة صورة الخلفية بنجاح:

لاحظ أن الصورة مكررة. لحل هذه المشكلة ، تحقق من العقار التالي.

خاصية تكرار الخلفية في CSS

عند إضافة صورة كخلفية على صفحة ويب ، يتم تكرارها افتراضيًا. لتجنب هذا التكرار وضبط النمط وفقًا لاختيارك ، فإن ' تكرار الخلفية 'الممتلكات المستخدمة.

بناء الجملة

صيغة خاصية تكرار الخلفية هي:

تكرار الخلفية : كرر | كرر- x | كرر ص | لا تكرار

فيما يلي وصف القيم المحددة لخاصية تكرار الخلفية:

كرر: يتم استخدامه لتكرار الصورة في كلا الاتجاهين ، الرأسي والأفقي.
كرر x: يتم استخدامه لضبط تكرار الصورة أفقيًا فقط.
تكرار ص: يحدد التكرار الرأسي للصورة.
غير مكرر: يتم استخدامه لتجنب تكرار الصورة.

مثال

هنا ، سنقوم بتعيين قيمة خاصية تكرار الخلفية على أنها ' لا تكرار ':

شعبة {

...

تكرار الخلفية : لا تكرار ؛

}

يتم إعطاء نتيجة الكود المذكور أعلاه أدناه. يمكنك أن ترى أن الصورة لم تعد تتكرر:

خاصية وضع الخلفية في CSS

لتعيين موضع صورة الخلفية ، فإن الخيار ' خلفية الموقف 'الخاصية المستخدمة. يسمح لك بضبط الصورة في مواضع مختلفة مثل اليسار العلوي والوسط الأيسر والقاع الأيسر والأعلى الأيمن والوسط الأيمن وغير ذلك الكثير.

بناء الجملة

صيغة خاصية background-position هي:

خلفية الموقف : القيمة

في مكان ' القيمة '، يمكنك تحديد موضع الصورة.

مثال

هنا ، سنقوم بتعيين موضع الخلفية كـ ' المركز ':

شعبة {

...

خلفية الموقف : المركز ؛

}

في الإخراج أدناه ، تظهر الصورة في وسط الصفحة:

خاصية حجم الخلفية في CSS

لتعيين حجم صورة الخلفية ، فإن ' حجم الخلفية 'يتم استخدام الخاصية.

بناء الجملة

حجم الخلفية له الصيغة التالية:

حجم الخلفية : الطول | الغطاء

فيما يلي وصف لقيم خاصية حجم الخلفية:

الطول: يتم استخدامه لإصلاح عرض وارتفاع صورة الخلفية.
التغطية: يتم استخدامه لضبط صورة الخلفية في الخلفية بأكملها.

مثال

سنقوم بتعيين حجم الخلفية كـ ' 100٪ 'الارتفاع و' 80٪ ' العرض:

شعبة {

...

حجم الخلفية : 100٪ 80٪ ؛

}

يمكنك أن ترى أنه تم تغيير حجم الصورة بناءً على الأبعاد المحددة:

خاصية CSS background-origin

ال ' أصل الخلفية 'لضبط منطقة تحديد موضع صورة الخلفية. يتم ضبط الصورة في الزاوية العلوية اليسرى كإعداد افتراضي.

بناء الجملة

صيغة الخاصية background-origin هي:

أصل الخلفية : صندوق الحشو | مربع الحدود | مربع المحتوى

تم وصف قيم خاصية background-origin أدناه:

مربع الحشو: إنها القيمة الافتراضية لخاصية أصل الخلفية المستخدمة لضبط موضع صورة الخلفية وفقًا لحافة الحشو.
مربع الحدود: يتم استخدامه لضبط الصورة وفقًا لمربع حدود الصورة.
مربع المحتوى: يتم استخدامه لضبط صورة الخلفية وفقًا لمحتوى الصورة.

ملحوظة: لا تعمل خاصية background-origin إذا تم تعيين قيمة خاصية background-attachment على أنها ' مُثَبَّت '.

مثال

أولاً ، قم بإنشاء حد حول الحاوية. هنا ، سنكمل المثال السابق ونضبط قيمة المساحة المتروكة على أنها ' 10 بكسل '. بعد ذلك ، اضبط عرض الحد كـ ' 15 بكسل '، النمط كـ' ريدج '، واللون كـ' RGB (1 ، 68 ، 68) '. في النهاية ، سنعين قيمة خاصية background-origin على أنها ' مربع المحتوى ':

شعبة {

...

حشوة : 10 بكسل ؛

الحدود : 15 بكسل ريدج RGB ( 1 و 68 و 68 ) ؛

أصل الخلفية : مربع المحتوى ؛

}

يتم إعطاء نتيجة الكود المذكور أعلاه أدناه. يمكنك أن ترى أن موضع الصورة مضبوط وفقًا لمحتوى div:

خاصية CSS background-clip

ال ' مقطع الخلفية 'على لون خلفية العنصر. يتيح لك التحكم في مدى امتداد لون الخلفية إلى ما بعد عنصر ، مثل المساحة المتروكة للعنصر وحدوده ومحتواه.

بناء الجملة

صيغة خاصية background-clip هي:

أصل الخلفية : مربع الحدود | صندوق الحشو | مربع المحتوى

تم وصف قيم خاصية background-origin أدناه:

مربع الحدود: إنها القيمة الافتراضية لخاصية أصل الخلفية المستخدمة لتعيين لون الخلفية خلف الحد.
مربع الحشو: يتم استخدامه لضبط اللون داخل مربع الحشو للعنصر.
مربع المحتوى: يتم استخدامه لضبط لون الخلفية وفقًا لمحتوى العنصر.

مثال

سنكمل المثال السابق ونغير قيمة نمط الحدود إلى ' منقط لفهم خاصية مقطع الخلفية. بعد ذلك ، سنقوم بتعيين قيمة خاصية background-clip على أنها ' مربع الحشو ':

شعبة {

...

مقطع الخلفية : مربع الحشو ؛

}

يشير الإخراج إلى ظهور لون الخلفية البيضاء عند انتهاء حافة الحد:

خاصية مرفقات الخلفية في CSS

ال ' مرفق الخلفية 'لضبط السلوك أو الصورة أثناء التمرير في الصفحة. يمكن ضبط سلوكه مع التمرير مع عناصر أخرى أو إصلاحه.

بناء الجملة

بناء جملة خاصية مرفق الخلفية هو:

مرفق الخلفية : القيمة

يمكنك تعيين قيمة مرفق الخلفية كـ ' مُثَبَّت 'لإصلاح صورة الخلفية أو' التمرير 'للسماح للصورة بالتمرير مع الصفحة.

ملحوظة: بشكل افتراضي ، يتم تعيين قيمة خاصية مرفق الخلفية على أنها ' التمرير '.

يمكن ملاحظة أن صورة الخلفية المضافة ليست ثابتة عند التمرير. الآن دعونا نصلح هذه المشكلة.

للقيام بذلك ، قمنا بتعيين قيمة خاصية مرفق الخلفية على أنها ' مُثَبَّت ':

شعبة {

...

مرفق الخلفية : مُثَبَّت ؛

}

هذه هي النتيجة التي توضح أن الصورة قد تم إصلاحها:

الآن ، توجه نحو المقارنة بين خصائص لون الخلفية والخلفية.