background-attachment

ویژگی background-attachment رفتار تصویر پس زمینه را نسبت به اسکرول صفحه و عنصر کنترل می کند.

این ویژگی سه مقدار می پذیرد:

 

scroll

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

در مثال زیر زمانی که باکس داخلی را اسکرول می کنیم تصویر ثابت است اما زمانی که باکس بیرونی (مربوط به pen) را اسکرول می کنیم تصویر با عنصر حرکت می کند و از viewport خارج می شود.

See the Pen background-attachment: scroll by Mojtaba Seyedi (@seyedi) on CodePen.

 

fixed

مقدار پرکاربرد این ویژگی fixed می باشد که باعث می شود تا تصویر پس زمینه عنصر در ناحیه ترسیمش همیشه ثابت بماند و حتی اسکرول viewport هم تاثیری بر آن نداشته باشد.

 


header {
  background-attachment: fixed;
}

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

 

See the Pen background-attachment: fixed by Mojtaba Seyedi (@seyedi) on CodePen.


 

از این تکنیک برای بوجود آوردن افکت هایی نظیر دموی زیر در خیلی از سایت ها استفاده می شود:

 

See the Pen background-attachment: fiexed by Mojtaba Seyedi (@seyedi) on CodePen.


 

 

local

مقدار آخر local است که باعث می شود تا تصویر پس زمینه عنصر حتی نسبت به اسکرول مربوط به عنصر هم ثابت نباشد و حرکت کند:

 


header {
  background-attachment: local;
}

 

See the Pen background-attachment: local by Mojtaba Seyedi (@seyedi) on CodePen.


 

اگر چندین تصویر پس زمینه برای یک عنصر تعریف شده باشد می توان برای این ویژگی نیز چندین مقدار تعریف کرد فقط لازم است مقادیر را توسط ویرگول از هم جدا کنیم:

 


div {
  background-image: url(first.jpg), url(second.jpg);
  background-attachment: fixed, local;
}

 

 

پشتیبانی مرورگر ها

2 دیدگاه برای “background-attachment

  1. سلام
    ممنون بابت سایت و آموزاشای خوبتون
    ببخشید یه سوال داشتم
    من وقتی روی بک گراندم یک باکس شفاف برای نوشته هام ایجاد می کنم، وقتی میزان شفاف بودن خود بک گراند رو کم و زیاد می کنم روی اون باکس و عناصر دیگه تاثیر میذاره در حالی که من میخوام فقط بک گراندم شفاف تر بشه

    1. سلام.

      میشه یک دمو بسازید که کاملا متوجه بشم؟ می تونید توی سایت codepen.io یا jsbin.com همینی که میگید رو بسازید و اینجا لینک بدید.

      تنها چیزی که به ذهن من میاد اینه که برای شفافیت اگر از opacity استفاده بشه خوب این ویژگی روی بچه های عنصر هم اعمال میشه و باید از روش های دیگه مثلا از رنگ های نیمه شفاف برای background استفاده بشه.

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *