❮
Programming Basics SQL HTML CSS JavaScript Python C++ Java JavaFX Swing Problem Solving English English Conversations Computer Fundamentals 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-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;
}
div { background: url(pyramids.png) right center no-repeat, url(paper.png) repeat left bottom; background-size: 70px 70px, contain; }
جرب الكود
الدرس التالي❯ ❮الدرس السابق