Theme
Primary Color
أكاديمية الزيرو

الدرس 20

حركة الخلفية مع التمرير باستخدام background-attachment

معنى أسماء العناصر والمصطلحات

المعنىStand ForName
طريقة حركة الخلفية وقت التمريرbackground-attachment
الخلفية مرتبطة بالعنصرscroll
الخلفية ثابتة بالنسبة لنافذة العرضfixed
الخلفية بتتحرك مع محتوى العنصر وقت التمرير داخلهlocal

جهز المثال

هنستعمل صورة pattern.png الموجودة داخل learn-css/images

<div class="box">
  <p>First Line</p>
  <p>Second Line</p>
  <p>Third Line</p>
  <p>Fourth Line</p>
  <p>Fifth Line</p>
  <p>Sixth Line</p>
  <p>Seventh Line</p>
  <p>Eighth Line</p>
</div>
body {
  min-height: 1600px;
}

.box {
  width: 350px;
  height: 150px;
  overflow: auto;
  background-image: url("../images/pattern.png");
  background-repeat: no-repeat;
  background-attachment: scroll;
}

استخدمنا min-height علشان الصفحة تبقى طويلة وتقدر تمررها 

وال overflow: auto بتظهر شريط تمرير داخل البوكس لما المحتوى يزيد عن ارتفاعه

القيمة scroll

مرر المحتوى داخل البوكس هتلاقي النص بيتحرك والصورة ثابتة بالنسبة للبوكس نفسه 

ولو مررت الصفحة البوكس وخلفيته بيتحركوا معاها

القيمة local

بدل سطر background-attachment بالقيمة local 

وجرب التمرير داخل البوكس الصورة دلوقتي بتتحرك مع المحتوى

background-attachment: local;

القيمة fixed

background-attachment: fixed;

هنا مكان الخلفية بيبقى مرتبط بنافذة العرض جرب تمرير الصفحة نفسها من الكمبيوتر 

الصورة بتفضل في مكانها بالنسبة للشاشة والجزء الظاهر منها بيتحدد بمكان البوكس

جرب بنفسك

ارجع للقيمة scroll ثم local وقارن التمرير داخل العنصر 

وبعدها جرب fixed مع تمرير الصفحة علشان تفرق بين الحالتين

آخر تعديل للدرس: