دليل خلفية CSS

الرابط الأصلي: الخلفيات في CSS: كل ما تحتاج إلى معرفته
رابط الترجمة: دليل خلفية CSS

يرجى الاحتفاظ بحقوق الطبع والنشر والروابط عند إعادة الطباعة

تعد الخلفية جزءًا مهمًا من CSS وأحد المعارف الأساسية لـ CSS التي تحتاج إلى معرفتها. ستغطي هذه المقالة الاستخدام الأساسي لخلفية CSS (الخلفية)، بما في ذلك السمات مثل مرفق الخلفية، وما إلى ذلك. وستقدم أيضًا بعض التقنيات الشائعة حول الخلفية (الخلفية)، بالإضافة إلى الخلفية (الخلفية) في CSS3 (بما في ذلك 4 خاصية الخلفية الجديدة).

الخلفية في css2

ملخص

هناك 5 خصائص أساسية للخلفية في CSS2، وهي:

• لون الخلفية: يحدد اللون لملء الخلفية.

• صورة الخلفية: صورة مرجعية كخلفية.

• موقف الخلفية: يحدد موضع صورة خلفية العنصر.

• تكرار الخلفية: يحدد ما إذا كان سيتم تكرار صورة الخلفية أم لا.

• مرفق الخلفية: يحدد ما إذا كانت صورة الخلفية سيتم تمريرها مع الصفحة.

يمكن دمج هذه الخصائص جميعها في خاصية واحدة مختصرة: الخلفية. إحدى النقاط المهمة التي يجب ملاحظتها هي أن الخلفية تشغل كل مساحة محتوى العنصر، بما في ذلك المساحة المتروكة والحدود، ولكنها لا تتضمن هامش العنصر. إنه يعمل بشكل جيد في Firefox وSafari وOpera وIE8، ولكن في IE6 وIE7، لا تتضمن الخلفية الحدود.

الخصائص الأساسية

لون الخلفية

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

لون الخلفية: أزرق؛
لون الخلفية: rgb(0, 0, 255);
لون الخلفية: #0000ff؛

يمكن أيضًا ضبط لون الخلفية على اللون الشفاف، مما يجعل العناصر الموجودة تحته مرئية.

صورة الخلفية

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

صورة الخلفية: url(image.jpg);

أما إذا كانت الصورة موجودة في دليل فرعي يسمى الصور فيجب أن تكون:

صورة الخلفية: url(images/image.jpg);

Tangbantomatoes: استخدم ../ للإشارة إلى دليل المستوى العلوي، مثل صورة الخلفية: url(../images/image.jpg); للإشارة إلى أن الصورة موجودة في الدليل الفرعي للصور في دليل المستوى العلوي لـ ورقة الأنماط. إنه أمر معقد بعض الشيء، ولكن يجب أن يعرف الجميع هذا بالفعل، لذلك لن أتحدث عنه بالتفصيل. جميع الحقوق محفوظة لشركة Front End Observation، يرجى الاحتفاظ بالرابط عند إعادة الطباعة.