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