CSS

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

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

التاريخ

23 نوفمبر 2021

الدروس

137

المستوى

مبتدئ

اللغة

انجليزي

المشاهدات

2592

المواضيع

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

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;
}
مصطلحات الدرس
Attachment
Attachment

إرفاق / اداة ملحقة

Background
Background

خلفية

Scroll
Scroll

تنقل من الأعلي الي الأسفل

Property
Property

خاصية

Value
Value

قيمة

Fixed
Fixed

ثابت

Break Line
Break Line

خط فاصل

اختصارات الدرس
CSS
CSS

Cascading Style Sheets

صفحات الأنماط الانسيابية
HTML
HTML

Hypertext Markup Language

لغة توصيف النص الفائق الخاصة ببناء صفحة الإنترنت
link
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات