آشنایی بیشتر با 50 ویژگی جالب CSS (جلسه 6) : ویژگی background-attachment

- visibility ۰ mode_comment

css3 attributes

ویژگی background-attachment

همونطور که میدونید شما میتونین با استفاده از ویژگی background-image برای المنت مورد نظر خودتون پس زمینه از نوع تصویر قرار بدین. همچنین با استفاده از ویژگی background-size هم میتونین سایز پس زمینه خودتون رو مشخص کنید. در این مواقع یک ویژگی بنام background-attachment میتونه کارای جالبی رو برای ما انجام بده. با استفاده از این ویژگی میتونین مشخص کنید که زمانی که صفحه داره اسکرول میشه، این پس زمینه ثابت باشه و یا اینکه به همراه اسکرول، حرکت کنه. در اینجا باید به جایی که داریم اسکرول میکنیم، دقت داشته باشیم. در اینجا دو نوع اسکرول تعریف میشه. یکی اینه که کل viewport و صفحه مرورگر اسکرول بشه و دیگری اینکه خود المنت مورد نظر اسکرول بشه. به مورد دومی اسکرول local یا محلی میگن.

خب حالا ببینیم که ویژگی background-attachement چطوری این مورد رو کنترل میکنه. این ویژگی سه مقدار رو قبول میکنه:

  • scroll : این مورد مقدار پیش فرض این ویژگی هست
  • local
  • fixed

مقدار scroll:

زمانی که این ویژگی رو اصلا استفاده نمی کنیم، مقدار scroll بصورت پیش فرض اعمال میشه. در این مواقع دو حالت پیش میاد:

  • اسکرول کل viewport : در این حالت تصویر پس زمینه ثابت میمونه و جابجا نمیشه
  • اسکرول خود المنت : در این حالت هم تصویر پس زمینه ثابت میمونه و حرکتی از خودش نشون نمیده

برای این حالت میتونین دموی زیر رو مشاهده کنید: همونطور که دیدید به هر طریقی که اسکرول انجام بدین، پس زمینه سر جای خودش ثابت ایستاده و حرکتی نداره.

مقدار local:

زمانی که این ویژگی رو برابر با local قرار میدید، دو حالت پیش میاد:

  • اسکرول کل viewport : در این حالت تصویر پس زمینه ثابت میمونه و جابجا نمیشه
  • اسکرول خود المنت : اما در این حالت تصویر به همراه محتویات درون اون جابجا میشه و بالا و پایین میشه

برای این حالت میتونین دموی زیر رو مشاهده کنید: مقدار fixed:

این حالت تقریبا مخالف حالت بالا هستش. زمانی که این ویژگی رو برابر با fixed قرار میدید، دو حالت پیش میاد:

  • اسکرول کل viewport : در این حالت تصویر پشت زمینه ثابت میمونه ولی وقتی که صفحه اسکرول میشه و المنت مورد نظر بالا و پایین میشه، حالت زیبایی به وجود میاد.
  • اسکرول خود المنت : اما در این حالت تصویر پس زمینه ثابت میمونه و جابجا نمیشه

برای این حالت میتونین دموی زیر رو مشاهده کنید: به همین راحتی میتونیم با این ویژگی کار کنیم.

در جلسات بعد با ادامه آموزش در خدمتتون هستیم.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق باشید

یا علی

Source

comment دیدگاه کاربران

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.