❮
Programming Basics SQL HTML CSS JavaScript React Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals Linux Learn Typing
❯
الدرس التالي❯ ❮الدرس السابق

CSSخلفيات متعددة

  • مفهوم الخلفيات المتعددة
  • كيفية وضع أكثر من صورة في الخلفية

مفهوم الخلفيات المتعددة

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

Here, there are 2 background images added to the same element.

كيفية وضع أكثر من صورة في الخلفية

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

خصائص الخلفيات background-image background-repeat background-size background-position background-attachment background و القيم التي يمكن إعطاءها لها شرحناها بالتفصيل في درس الخلفيات و لهذا نرجوا منك مراجعة ذاك الدرس في حال مرت معك أي قيمة لم تفهم سبب استخدامنا لها.


في المثال التالي قمنا بوضع صورتين كخلفية للعنصر، مع تحديد خصائص ظهور كل واحدة منهما.

المثال الأول

div {
    background-image: url(pyramids.png), url(paper.png);
    background-repeat: no-repeat, repeat;
    background-position: right center, left bottom;
    background-size: 70px 70px, contain;
}
جرب الكود

هنا قمنا بإعادة المثال السابق مع تعريف خصائص الخلفتين بشكل مختصر.

المثال الثاني

div {
    background: url(pyramids.png) right center no-repeat, url(paper.png) repeat left bottom;
    background-size: 70px 70px, contain;
}
جرب الكود