آموزش ویژگی background-attachment در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی background-attachment در CSS با من همراه باشید.

آموزش ویژگی background-attachment در CSS

Free-Learn

ویژگی background-attachment در CSS

با استفاده از ویژگی background-attachment در CSS میتوان نحوه نمایش / پیوست تصویر زمینه را در یک صفحه وب مشخص کرد.

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

مثال در حالت فیکس

سلام خوبی؟

Free-Learn

مثال از این ویژگی

در ادامه میتوانید یک مثال از ویژگی background-attachment را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : استفاده از مقدار fixed

امتحان کنید

مثال شماره ۲ : استفاده از مقدار scroll

امتحان کنید

مثال شماره ۳ : ایجاد زمینه پارالاکس یا Parallax

امتحان کنید

مثال شماره ۴ : استفاده از مقدار local و fixed بصورت ترکیبی با داشتن ۲ تصویر زمینه

امتحان کنید

Free-Learn

جدول مشخصات ویژگی background-attachment در CSS

در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.

مقدار پیش فرض scroll
قابل ارث بری ندارد | اطلاعات بیشتر
قابل متحرک سازی ندارد | اطلاعات بیشتر
نسخه CSS1
نحوه استفاده در جاوااسکریپت object.style.backgroundAttachment=”fixed”;

Free-Learn

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

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی background-attachment در CSS پشتیبانی میکنند یا خیر.

نام ویژگی Chrome Firefox Opera Safari IE
background-attachment ۱٫۰ ۱٫۰ ۳٫۵ ۱٫۰ ۴٫۰

Free-Learn

شکل نوشتاری

نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.

Free-Learn

جدول مقادیر ویژگی background-attachment در CSS

در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.

مقدار توضیح
scroll پیش فرض – تصویر زمینه به نسبت خوده عنصر ، بهمراه اسکرول حرکت میکند.
fixed تصویر زمینه به نسبت خوده عنصر فیکس یا ثابت می ماند و اسکرول نمیشود.
local تصویر زمینه به نسبت محتوای عنصر ثابت می باشد
ولی اگر محتوای عنصر دارای اسکرول باشد تصویر نیز اسکرول میشود.
initial استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر
inherit استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر

Free-Learn

نکات و توضیحات

مقدار local در عمل شبیه مقدار scroll می باشد و به نسبت محتوای یک عنصر ثابت می باشد، ولی استفاده ترکیبی از مقدار local و fixed (همانند مثال شماره ۴) کارای باحالی میشه کرد.

این ویژگی معمولا توسط مرورگرهای مدرن پشتیبانی میشود و مشکلی در نمایش ندارد، ولی خب بازم با این وجود ممکن است بروی برخی از گوشی های موبایل و تبلت ها به درستی یا کلا عمل نکند.

Free-Learn

دریافت PDF یا پرینت این مطلب