خصوصیت background-attachment
مثال (خصوصیت background-attachment)
چگونه عکس پس زمینه را ثابت کنیم:
body
{
background-image:url('w3css.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
خودتان امتحان کنید »{
background-image:url('w3css.gif');
background-repeat:no-repeat;
background-attachment:fixed;
}
تعریف و کاربرد
با استفاده از خصوصیت background-attachment می توانید تنظیم نمایید که، اگر صفحه Scroll داشت و به سمت پایین یا بالا حرکت کردیم آیا عکس پس زمینه در جای خود ثابت بماند یا خیر.
| مقدار پیشفرض | scroll |
|---|---|
| ارث بری | خیر |
| نسخه | CSS1 |
| JavaScript ساختار | object.style.backgroundAttachment="fixed" |
پشتیبانی مرورگرها
تمام مرورگرهای اصلی، خصوصیت background-attachment را پشتیبانی می کنند.
مقدارهای خصوصیت
| مقدار | توضیحات |
|---|---|
| scroll | عکس پس زمینه همراه با عنصر، scroll می شود. (مقدار پیشفرض) |
| fixed | عکس پس زمینه نسبت به محل نمایش، ثابت می شود. |
| local | عکس پس زمینه همراه با محتویات عنصر، scroll می شود. |
بیاموزهای مرتبط
Styling Backgrounds (بیاموز CSS)
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 14280
دیدگاه‌ها
سلام فرق scroll با local چیه ؟
با سلام
همانطور که در توضیحات ذکر شده است خاصیت scroll باعث می شود تا پس زمینه همراه با خود عنصر "نه محتویات آن عنصر" اسکرول شود.
برای درک بهتر عملکرد این خاصیت به مثال ذکر شده در لینک زیر مراجعه کنید :
jsfiddle.net/n88cZ/2/
همچنین خصوصیت local باعث می شود تا پس زمینه همراه با محتویات آن عنصر اسکرول شود، به عبارتی در صورتی که در صفحه از یک iframe استفاده کنیم پس زمینه به همراه محتویات آن iframe اسکرول می شود:
برای مشاهده مثالی از این مورد نیز می توانید از لینک زیر استفاده کنید :
jsfiddle.net/n88cZ/1/