• illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید میانگین رضایت دانشجویان سون لرن از دوره ها، بیش از 94% می باشد!

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

0 119 ۲۵ بهمن ۹۵

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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها اولین دیدگاه این مطلب را ارسال کنید.

ارسال دیدگاه

ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

:: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
عضویت/ ورود سریع با :
در حال اتصال ...

ورود به سایت

ورود سریع با :
در حال اتصال ...

جستجو در سون لرن

عبارت :
7LearnTelegram