CSS Background Attachment
تحريك وثبات صورة الخلفية في لغة CSS
ستتعلم في هذا الدرس التحكم في الخلفيات الصور في من حيث تحريكها ثباتها علي المتصفح عند قيام المستخدمين عمل Scroll لصفحة الويب لأعلي أو لأسفل عن طريق خاصية CSS background-attachment.
التاريخ
23 نوفمبر 2021
الدروس
137
المستوى
مبتدئ
اللغة
انجليزي
المشاهدات
4836
المواضيع
24
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; }