logo

خلفية CSS

تُستخدم خاصية الخلفية في CSS لتحديد تأثيرات الخلفية على العنصر. هناك 5 خصائص خلفية لـ CSS تؤثر على عناصر HTML:

  1. لون الخلفية
  2. الصورة الخلفية
  3. تكرار الخلفية
  4. مرفق الخلفية
  5. موقف الخلفية

int بارسينت

1) لون الخلفية CSS

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

يمكنك ضبط لون الخلفية مثل هذا:

 h2,p{ background-color: #b0d4de; } <h2>My first CSS page.</h2> <p>Hello Javatpoint. This is an example of CSS background-color.</p> 
اختبره الآن

انتاج:

تحويل من سلسلة إلى عدد صحيح جافا

صفحتي الأولى في CSS.

مرحبًا جافات بوينت. هذا مثال على لون خلفية CSS.


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

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

 body { background-image: url(&apos;paper1.webp&apos;); margin-left:100px; } 
اختبره الآن

4) مرفق الخلفية CSS

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

 background: white url(&apos;bbb.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; 
اختبره الآن

5) موقف خلفية CSS

يتم استخدام خاصية موضع الخلفية لتحديد الموضع الأولي لصورة الخلفية. بشكل افتراضي، يتم وضع صورة الخلفية في الجزء العلوي الأيسر من صفحة الويب.

النمر مقارنة بالأسد

يمكنك ضبط الأوضاع التالية:

  1. مركز
  2. قمة
  3. قاع
  4. غادر
  5. يمين
 background: white url(&apos;good-morning.webp&apos;); background-repeat: no-repeat; background-attachment: fixed; background-position: center; 
اختبره الآن