CSS

CSS Background Attachment
تحريك وثبات صورة الخلفية في لغة CSS

ستتعلم في هذا الدرس التحكم في الخلفيات الصور في من حيث تحريكها ثباتها علي المتصفح عند قيام المستخدمين عمل Scroll لصفحة الويب لأعلي أو لأسفل عن طريق خاصية CSS background-attachment.

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

5105

المواضيع

24
الشروحات chevron_left CSS Background Attachment chevron_left CSS

CSS Background Attachment
تحريك وثبات صورة الخلفية في لغة CSS

</> CSS Background Attachment
تحريك وثبات صورة الخلفية في لغة CSS

تستخدم خاصية background-attachment لعمل خلفيات ثابته أو خلفيات متحركة عند تحريك scroll الفأرة mouse لأعلي ولأسفل الصفحة.


قيم خاصية background-attachment:

  • scroll وهي القيمة الأفتراضية وهي تحريك صورة الخلفية مع تحريك scroll, إذا كانت الصورة في مقدمة صفحة HTML سوف يتم إخفاءها عند عمل scroll إلي اسفل الصفحة.
  • fixed  وهي ثبات صورة الخلفية مع تحريك scroll وتظل الصورة في موضعهاً الأصلي مهما تم تحريك scroll.
قيم خاصية background-attachment
background-attachment: scroll|fixed|local|initial|inherit;
عند تطبيق هذا المثال يجب أن يكون بداخل ملف HTML مجموعه عناصر أكبر من حجم الصفحة لكي يظهر Scroll أو أن يكون عنصر pre وبداخله مجموعه من break line لكي يظهر Scroll.

</> CSS background-attachment scroll
قيمة scroll مع خاصية background-attachment في لغة CSS

الوضع الافتراضي للخلفية هو scroll يمكنك استخدام background-attachment مع القيمة scroll ليتم تحريك الخلفية مع scroll عدم ثبات الخلفية.

CSS background attachment scroll

يتم تحريك الخلفية مع تحريك scroll.

body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat:no-repeat;
background-attachment: scroll;
}

</> CSS background attachment fixed
قيمة fixed مع خاصية background-attachment في لغة CSS

تستخدم خاصية background-attachment مع القيمة fixed في لغة CSS لعمل خلفيات ثابتة عند القيام بتحريك scroll لأعلي ولأسفل لا تتحرك ثورة الخلفية وتكون في موضعها الحالي في صفحة الويب.

CSS background attachment fixed

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

body
{
background-image:url('https://www.closetag.com/images/background.jpg');
background-repeat:no-repeat;
background-attachment: fixed;
}
معلومات تهمك
  • لا تنس تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنس مشاركة الموقع مع أصدقائك حتى تعمّ الفائدة وتكون سببًا في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات