21. خاصية اختصار الخلفية

يوفر CSS خاصية اختصار قوية background تسمح لك بتعريف جميع الخصائص المتعلقة بالخلفية في سطر واحد. هذه هي الطريقة المفضلة لكتابة كود نظيف ومختصر.

ترتيب الاختصار (بشكل عام)

رغم أن الترتيب ليس صارماً تماماً، إلا أن الترتيب التقليدي هو:

background: color image repeat attachment position / size;

ملاحظة: يجب فصل خاصية الحجم (cover أو الأبعاد) عن الموضع باستخدام شرطة مائلة (/).

أمثلة على الاختصار

المثال 1: لون وصورة بسيطة

css /* الطريقة المفصلة */ .long { background-color: black; background-image: url('logo.png'); background-repeat: no-repeat; }

/* ما يعادلها بالاختصار */ .short { background: black url('logo.png') no-repeat; }

المثال 2: خلفية ثابتة، متوسطة، ومحددة الحجم

css .hero-bg { /* الترتيب: اللون الصورة التكرار الارتباط الموضع / الحجم */ background: #000 url('../img/bg.jpg') no-repeat fixed center center / cover; }

نصيحة: إذا حذفت خاصية في الاختصار (مثل repeat أو attachment) ، فسيتم إعادة تعيينها إلى قيمتها الافتراضية. إذا حددت لوناً فقط، فسيتم تعيين كل شيء آخر إلى none أو auto بشكل افتراضي.

css .only-color { background: lightyellow; /* يعيد ضبط الصورة والتكرار وما إلى ذلك، لكنه يحدد اللون */ }