دليل خلفية 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); ورقة الأنماط. إنه أمر معقد بعض الشيء، ولكن يجب أن يعرف الجميع ذلك بالفعل، لذلك لن أتحدث عنه بالتفصيل. المراقبة الأمامية جميع الحقوق محفوظة، يرجى الاحتفاظ بالرابط عند إعادة الطباعة.