cssblog.ir logo
P

background-attachment

جلوگیری از حرکت تصویر پس‌زمینه با اسکرول صفحه

این مشخصه رفتار تصویر پس زمینه در هنگام اسکرول را تعیین می کند و کاربردهای بسیار جالبی دارد

ممکن است در برخی از وبسایت ها مشاهده کرده باشید که با اسکرول صفحه بک گراند یک قسمت حرکت می کند و قسمتی دیگر از آن تصویر مشاهده می شود. برای پیاده سازی چنین افکتی از این مشخصه استفاده می شود. 

در حالت عادی تصاویر پس زمینه به هنگام اسکرول، اسکرول می شوند (یعنی حرکت می کنند) و می توان گفت که ما در حالت عادی و با اسکرول تغییری در آنها مشاهده نمی کنیم. اما ما می توانیم با استفاده از background-attachment تعیین کنیم که رفتار آنها به نسبت اسکرول به چه شکل باشد. 

این مشخصه ۳ مقدارscroll,fixed,local را قبول می کند که بهترین راه برای توضیح این مقادیر مثال فوق العاده خوبی است که در css-tricks قرار داده شده و من در اینجا عینا از آن استفاده می کنم.  

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

توضیحی درباره مقادیری که این مشخصه می گیرد 

مقدار scroll همان مقدار پیشفرض و عادی است. با اسکرول  پنجره (view اصلی)  پس زمینه ما نیز حرکت می کند اما داخل خود عنصر دارای پس زمینه، ثابت می ماند.

مقدار fixed به این معنی است که همیشه پس زمینه ثابت باشد و مهم نیست که پنجره ما یا خود آن عنصر اسکرول می خورد یا خیر. این حالت مانند پنجره ای است که جابجا شدن در اطراف آن باعث تغییر در زاویه نگاه ما به منظره بیرون خواهد شد. پس بدیهی است که منظره بیرون با حرکت ما جابجا نمی شود. 

مقدار local این مقدار باعث می شود که هم پنجره (view اصلی) و هم داخل خود عنصر، اسکرول بخورند. 

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

تاکنون <% totalComments %> دیدگاه برای این مطلب ثبت شده است.

تاکنون دیدگاهی ثبت نشده است. شما می توانید اولین شخصی باشید که دیدگاه خود را ارسال می کند

<% errorMessage %>

<% comment.name %>

avatar
<% comment.comment_replies.length %> پاسخ برای این دیدگاه ثبت شده است

<% reply.name %>

avatar

ارسال دیدگاه جدید

برای ارسال دیدگاه یا پرسش جدید از طریق فرم زیر اقدام کنید.

ارائه پاسخ به دیدگاه

شما در حال پاسخ دادن به دیدگاه «<% replyComment.name %>» هستید. انصراف از پاسخ

  • <% s %>
  • <% e %>

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

  1. برای حذف کپچا (عبارت امنیتی) وارد اکانت خود شوید
  2. شما می توانید از markdown داخل کامنت خود استفاده کنید (اطلاعات بیشتر)
  3. دیدگاه ها قبل از نمایش نیازمند تائید می باشند