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

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



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







background

المقدمة

خاصية CSS backgroundهي خاصية اختصار تسمح لك بتعيين خصائص العنصر الشائعة التالية:

• مقطع الخلفية
• لون الخلفية
• الصورة الخلفية
• أصل الخلفية
• خلفية الموقف
• تكرار الخلفية
• حجم الخلفية
• مرفق الخلفية

هنا سوف نركز على الخصائص background-image، background-positionو background-size.



تأمل المثال التالي:

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
}

يكون موضع البداية لصورة الخلفية أعلى الزاوية اليسرى للعنصر. حجم الصورة 50px * 50px. عند تعيين خاصية ، backgroundمن المهم أن تتذكر ترتيب الخصائص التي تحدد موضع وحجم صورة الخلفية.





مسار الصورة وموضعها وحجمها



في الشكل السابق ،background-positionتُتبعالقيم المتعلقة بتعيينخاصية بقيم الخاصيةbackground-size. إذا وضعنا هذه القيم بترتيب مختلف ، فسينتهي بنا الأمر باستخدام CSS ذات نمط غير صحيح. على سبيل المثال - مثل هذا:

.element {
  /* :  CSS */
  background: url(cool.jpg) 50px 50px/top left no-repeat;
}

موقف صورة الخلفية

لتعيين منطقة الخلفية ، الموضع الأصلي لصورة الخلفية ، استخدم الخاصية background-origin. أحب المرونة التي توفرها الملكية background-position. يسمح لك بوضع خلفية العناصر بطرق مختلفة:

• الكلمات الرئيسية ( top، right، bottom، left، center).
• قيم النسبة المئوية. على سبيل المثال: 50%.
• قيم تحدد مسافات معينة. على سبيل المثال: 20px 2.5rem.
• القيم التي تمثل المساحة المتروكة من حواف العنصر. على سبيل المثال: top 20px left 10px.

نظام الإحداثيات يكون أصل



نظام الإحداثيات المستخدم عند وضع صور الخلفية في الزاوية اليسرى العليا من العنصر. القيمة الأولية الخاصيةbackground-positionهي0% 0%.



من الجدير بالذكر أن القيمةtop leftهي نفس القيمةleft top. المتصفح ذكي بما يكفي لمعرفة مقدار هذه القيمة على المحور السيني ومقدارها على المحور ص.





أعلى اليسار واليسار الأعلى متماثلان.

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat;
  /*  -   ,    */
  background: url(cool.jpg) left top/50px 50px no-repeat;
}

حجم صورة الخلفية

يشير اسم الخاصية التي تحدد حجم صورة الخلفية background-sizeبشكل فريد إلى دور هذه الخاصية. حجم صورة الخلفية هو عرضها وارتفاعها. عند تعيين هذه الخاصية ، ضع في اعتبارك أن القيمة الأولى هي العرض والثانية هي الارتفاع.





يأتي العرض أولاً ثم الارتفاع



إذا كان عرض صورة الخلفية وارتفاعها متماثلين ، فهذا يعني أننا لسنا بحاجة إلى تحديد قيمتين لهماbackground-size. في مثل هذه الحالة ، قيمة واحدة كافية.



هنا ، بالمناسبة ، سيكون من المفيد الإشارة إلى أن مواصفات CSS تنص على ما يلي حول هذا: "إذا تم تحديد قيمة واحدة فقط ، فمن المفترض أن القيمة الثانية هي auto." لكن هذه الآلية لا يتم تنفيذها في المتصفحات ، على الرغم من أن هذا قد يتغير في المستقبل. أشكر إيليا ستريلتسين على لفت انتباهي إلى هذه التفاصيل.





تحدد القيمة الواحدة كلاً من العرض والارتفاع



الآن وقد غطينا أساسيات استخدام خاصية ماbackground، فلنتحدث عن كيفية العمل مع خلفيات متعددة.

خلفية متعددة

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

.element {
  background: url(cool.jpg) top left/50px 50px no-repeat,
    url(cool.jpg) center/50px 50px no-repeat;
}

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



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

ترتيب تكديس صور الخلفية فوق بعضها البعض

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

.hero {
  min-height: 350px;
  background: url('table.jpg') center/cover no-repeat,
    url('konafa.svg') center/50px no-repeat; 
}

هنا لدينا صورة جدول ( table.jpg) وصورة لوحة ( konafa.svg). أي من صور الخلفية التالية تعتقد أنه سيتم عرضها أولاً؟ صورة لطاولة أم صورة طبق؟





عنصر به صورتان للخلفية



الإجابة الصحيحة على هذا السؤال هي الحصول على صورة الجدول أولاً. في CSS ، الخلفية الموصوفة أولاً متراكبة على الخلفية الثانية ، الخلفية الثانية متراكبة على الخلفية الثالثة ، وهكذا. يؤثر تغيير ترتيب وصف الخلفيات على عرضها في العنصر.

.hero {
  background: url('konafa.svg') center/50px no-repeat,
  url('table.jpg') center/cover no-repeat;
}

الخلفية الأولى متراكبة على الثانية.كما



ترى ، الخلفية المحددة بواسطة الأول تكون فوق الخلفية المحددة بواسطة الثانية.

ألوان جامدة

لنفترض أننا نريد إنشاء خلفية أحادية اللون باستخدام أدوات خلفية CSS لعنصر. كيف افعلها؟ هذا ، بفضل تدرجات CSS ، هو مفاجأة. النقطة المهمة هي أنه إذا كنت تستخدم وظيفة linear-gradientبنفس ألوان التوقف ، فسوف ينتج عنها لون خالص.

.hero {
  background: linear-gradient(#3c88Ec, #3c88Ec)
}

تم إنشاء الخلفية باستخدام التدرج الخطي وألوان التوقف نفسها



إليك مثالًا بسيطًا لاستخدام التدرج اللوني لإعداد خلفية ، ولكن يمكن استخدام التدرجات اللونية في الواقع لإنشاء تأثيرات ممتعة ومفيدة للغاية.

حالات الاستخدام والأمثلة العملية

▍ صورة خلفية داكنة

في كثير من الأحيان ، لتسهيل قراءة نص القسم العلوي من الصفحة ، يجب تعتيم صورة الخلفية لهذا القسم. من السهل القيام بذلك باستخدام صورتين للخلفية.

.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.15)),
    url("landscape.jpg") center/cover;
}

صورة الخلفية المظلمة



الأكثر إثارة للاهتمام ، يمكن استخدام نفس الطريقة لتلوين صورة خلفية العناصر.

.hero {
  background: linear-gradient(135deg, rgba(177, 234, 77, 0.25), rgba(69, 149, 34, 0.25),
    url("landscape.jpg") center/cover;
}

خلفية ملونة

▍ الرسم باستخدام CSS

إن إمكانيات استخدام تدرجات CSS للرسم لا حصر لها حقًا. على وجه الخصوص ، نحن نتحدث عن التدرجات الموصوفة باستخدام الوظائف linear-gradient، radial-gradientوغيرها. في هذا المثال البسيط ، سنكتشف كيفية رسم كمبيوتر محمول باستخدام التدرجات.





صورة الكمبيوتر المحمول



دعونا نحلل هذه الصورة ونفكر في التدرجات التي نحتاجها.





إطار عرض بلاستيكي ، شاشة عرض LCD ، انعكاس ، حواف دائرية للعلبة ، حالة



لاحظ أنه عندما يتم "تفكيك" الكمبيوتر المحمول ، يكون من الأسهل بكثير معرفة التدرجات المطلوبة لرسمها باستخدام تقنية تطبيق خلفيات متعددة. ربما لاحظت أنني استخدمت دائرتين لتكون بمثابة الزوايا الدائرية لحالة الكمبيوتر المحمول. النقطة المهمة هي أنه لا توجد طريقة قياسية لإنشاء تدرجات بزوايا مستديرة.



الآن لنبدأ الرسم. أولاً ، دعنا نحدد كل من التدرجات اللونية كمتغير CSS ونحجم العناصر المقابلة. أحب استخدام متغيرات CSS لأنه يمكن أن يقلل من تعقيد الكود ، ويجعل الكود أكثر نظافة وأسهل في القراءة. بعد وصف التدرجات ، يمكنك الانتقال إلى وضعهم.

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
}

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





توضيح تخطيطي لجهاز كمبيوتر محمول

تنفيذ انعكاس الضوء من إطار شاشة الكمبيوتر المحمول

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





انعكاس الضوء من إطار شاشة الكمبيوتر المحمول

عرض شاشات الكريستال السائل

تتم محاذاة شاشة الكمبيوتر المحمول مع مركز المحور X ، ويتم إزاحة المحور Y 6بالبكسل عن الأصل.





شاشة كمبيوتر محمول

إطار العرض

يقع الإطار أسفل الشاشة ، ويتمركز حول المحور X ، وعلى المحور Y يتم إزاحته 0pxعن الأصل.





إطار العرض

شنطة لاب توب

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





شنطة لاب توب

الرسم النهائي

:root {
  --case: linear-gradient(#222, #222);
  --case-size: 152px 103px;
  --case-pos: center 0;

  --display: linear-gradient(#fff, #fff);
  --display-size: 137px 87px;
  --display-pos: center 6px;

  --reflection: linear-gradient(205deg, #fff, rgba(255, 255, 255, 0));
  --reflection-size: 78px 78px;
  --reflection-pos: top right;

  --body: linear-gradient(#888, #888);
  --body-size: 182px 9px;
  --body-pos: center bottom;

  --circle: radial-gradient(9px 9px at 5px 5.5px, #888 50%, transparent 50%);
  --circle-size: 10px 10px;
  --circle-left-pos: left bottom;
  --circle-right-pos: right bottom;
}

.cool {
  width: 190px;
  height: 112px;

  background-image: var(--reflection), var(--display), var(--case), var(--circle), var(--circle), var(--body);

  background-size: var(--reflection-size), var(--display-size), var(--case-size), var(--circle-size), var(--circle-size), var(--body-size);

  background-position: var(--reflection-pos), var(--display-pos), var(--case-pos), var(--circle-left-pos), var(--circle-right-pos), var(--body-pos);

  background-repeat: no-repeat;

  /*outline: solid 1px;*/
}

إليك مشروع CodePen يمكنك تجربته.

▍Mixing خلفيات متعددة

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





صورة ملونة وطبقة سوداء مساعدة



لاحظ أن مقتطف CSS التالي يستخدم الخاصيةbackground-blend-mode: color. هذا هو الذي يسمح لك بتحقيق التأثير المطلوب.

.hero {
  background: linear-gradient(#000, #000),
  url("landscape.jpg") center/cover;
  background-blend-mode: color;
}

صورة غير مشبعة



هل تستخدم خلفيات متعددة في CSS؟