سلام به همه پی وی لرنی های عزیز!
به دوره آموزش ویژگی های CSS خوش آمدید. CSS مخفف Cascade Style Sheets است که توسط W3C یا کنسرسیوم جهانی وب ایجاد شده است. اگر HTML اسکلت و ساختار وب است آنگاه CSS گوشت و پوست وب را تشکیل می دهد که ضعف های HTML را پوشش داده و آن ها را رفع می نماید. در این مجموعه از مجموعه آموزش های پی وی لرن قرار است به سراغ دوره آموزش ویژگی های CSS برویم و شما را با Properties ها یا ویژگی های CSS آشنا کنیم. روند هر جلسه این دوره به این شکل است که هر جلسه اختصاص به یک ویژگی دارد و در هر جلسه نیز برای هر Property یا ویژگی نیز سعی شده با ارائه مثال های مرتبط، یادگیری ویژگی های CSS آسان تر و ماندگارتر شود.
در جلسه قبلی آموختیم که چگونه از ویژگی background استفاده نماییم. این ویژگی یک ویژگی مختصر برای background-color ،background-image، background-position ،background-size و غیره است.
در این جلسه شما را به آموزش کار با ویژگی background-attachment در CSS دعوت می کنیم.
آموزش کار با ویژگی background-attachment در CSS
به مثال زیر توجه نمایید. در این مثال تصویری در پس زمینه قرار داده شده است که در هنگام اسکرول کردن صفحه ثابت است.
مثال :
| body { background-image: url("img_tree.gif"); background-repeat: no-repeat; background-attachment: fixed; } |
تعریف و کاربرد
ویژگی background-attachment تعیین می کند که آیا یک تصویر پس زمینه با بقیه صفحه پیمایش شود یا ثابت بماند.
| مقدار پیش فرض | scroll |
| به ارث بردن | خیر |
| متحرک بودن | خیر |
| نسخه | CSS1 |
| سینتکس JavaScript | “object.style.backgroundAttachment=”fixed |
پشتیبانی مرورگر ها
در ادامه آموزش کار با ویژگی background-attachment در CSS جدولی ارائه کرده ایم که نشان می دهد این ویژگی CSS در چه مرورگر های پشیبانی می شود.
| نام ویژگی |  |  |  |  |  |
| background-attachment | ۱٫۰ | ۱٫۰ | ۳٫۵ | ۱٫۰ | ۴٫۰ |
نکته
اینترنت اکسپلور ۸ و نسخه های قبل تر از آن از چندین تصویر پس زمینه بر روی یک عنصر پشتیبانی نمی کنند.
سینتکس CSS
مثال :
| background-attachment: scroll|fixed|local|initial|inherit; |
مقدار ویژگی
| مقدار | توضیحات |
|---|
| scroll | مقدار پیش فرض – تصویر پس زمینه با صفحه پیمایش می شود. |
| fixed | تصویر پس زمینه با صفحه پیمایش نمی شود. |
| local | تصویر پس زمینه با محتوای عنصر حرکت می کند. |
| initial | ویژگی را به مقدار پیش فرض خود تنظیم می کند. |
| inherit | این ویژگی را از عنصر parent خود به ارث می برد. |
مثال های بیشتر
مثال یک
تصویر پس زمینه ای که با صفحه پیمایش خواهد شد.
مثال :
| body { background-image: url("img_tree.gif"); background-repeat: no-repeat; background-attachment: scroll; } |
مثال دو
نحوه ایجاد یک اثر پیمایش parallax ( ساخت تصاویر با عمق سه بعدی )
مثال :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 | .fixed-bg { /* The background image */ background-image: url("img_tree.gif"); /* Set a specified height, or the minimum height for the background image */ min-height: 500px; /* Set background image to fixed (don't scroll along with the page) */ background-attachment: fixed; /* Center the background image */ background-position: center; /* Set the background image to no repeat */ background-repeat: no-repeat; /* Scale the background image to be as large as possible */ background-size: cover; } |
کلام آخر
در این جلسه به آموزش کار با ویژگی background-attachment در CSS پرداختیم و اموختیم که این ویژگی تعیین می کند که آیا یک تصویر پس زمینه با بقیه صفحه پیمایش شود یا ثابت بماند.
در جلسه آینده شما را با ویژگی background-blend-mode آشنا می نماییم.
با پی وی لرن همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
