ورود

**saberi** · ۹۴/۶/۲۳، ۰۹:۰۵ عصر

کار با Backgrounds و ویژگی های آن در CSS

بعد از آشنایی نسبی با css، تعریف کلاس (class) و آی دی (ID)، نوبت به فراگیری تنظیمات مربوط به Backgrounds در CSS است، خوشبختانه CSS قابلیت های تقریبا کاملی در این خصوص دارد و هرآنچه که در طراحی وب فکرش را بکنیم با کد های آن دست یافتنی است، در ادامه خواهیم گفت که چگونه می توانید پس زمینه یا Background صفحات، لایه ها و المان های مورد نظر خود را با ویژگی های color، image، repeat، attachment و position به زیبایی شکل دهید و از آنها به طور سفارشی استفاده کنید.

شیوه نگارش کلی این عنصر و زیرمجموعه های آن به شکل زیر است:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

توضیح:
- در کد بالا صفحه ای فرضی را با عناصر background شکل داده ایم.
- در قسمت مربوط به عکس پس زمینه می توان از background به صورت پیش فرض یا background-image به صورت حرفه ای تر، استفاده کرد.
- برای نوشتن یک نکته یا یادداشت در حین کدنویسی css از علامت /*یادداشت*/ استفاده می کنیم.
- در قسمت مربوط به url باید آدرس دایرکتوری (یا آدرس کامل تصویری که آپلود می کنید) را به همراه نام کامل فایل (با پسوند) قرار دهید.
- در کد بالا ما تصویری با ابعاد 5 پیکسل در 5 پیکسل را آنقدر در راستای محور x ها تکرار کرده ایم که سطر اول صفحه را به طور کامل پوشش داده است.
- رنگ پس زمینه صفحه را با background-color و یک مقدار هگز که به صورت 069# مشخص است، تنظیم کرده ایم.
- background-position موقعیت تصویر پس زمینه ما را در صفحه مشخص می کنید.
- background-repeat نیز مشخص می کند که نحوه تکرار شدن تصویر پس زمینه در صفحه به چه شکل باشد.
حال به بررسی جزئی تر هر یک از عناصر فوق می پردازیم.

عنصر background:

این عنصر می تواند مقادیر رنگی (هگز) یا آدرس یک تصویر را در خود داشته باشد:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

رای حالت های شفاف می توان از مقادیر transparent استفاده کرد.

عنصر background-image:

آدرس یک تصویر را به صورت url در خود دارد، این قابلیت، تصویر پس زمینه ما را با توجه به زیرمجموعه ای که در آن تعریف شده است، مشخص می کند، به فرض ممکن است در یک بلاک div از آن استفاده کنیم و لذا این عنصر تصویر پس زمینه آن بلاک را شکل می دهد:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

برای نادیده گرفتن این قابلیت مقدار آن را none قرار می دهند.

عنصر background-attachment:

background-attachment به مرورگر می گوید که آیا تصویر پس زمینه با اسکرول صفحه، اسکرول شود یا خیر، اگر مقادیر آن را fixed قرار دهید، در صفحاتی که ارتفاع آنها از صفحه نمایش کاربر بیشتر است، نوار اسکرول کناری نمایش داده می شود و اگر کاربر به پائین یا بالای صفحه برود، تصویر پس زمینه در جای خود بدون تغییر و ثابت خواهد بود (این تکنیکی است که در برخی از قالب های وبلاگ ها نیز مشاهده می شود):

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مقادیر دیگر این عنصر scroll است که حالت پیش فرض می باشد.

عنصر background-position:

background-position موقعیت تصویر پس زمینه ما را در محلی که استفاده شده، مشخص می کند، به فرض اگر بخواهیم تصویر خود را از سمت راست شروع به نمایش کنیم، باید از مقدار background-position:right استفاده کنیم؛ مثالی دیگر:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مقادیر این عنصر به صورت bottom، top، left، right و center است که قابلیت استفاده از دو خاصیت را به طور همزمان در خود دارد (به طور مثال background-position:top right).

عنصر background-repeat:

این عنصر برای مشخص کردن نحوه تکرار تصویر پس زمینه در صفحه به کار می رود، به فرض ممکن است بخواهیم تصویری تنها یک بار در پس زمینه تکرار شود یا برعکس بخواهیم که تمام پس زمینه را پوشش دهد، بدین منظور از این عنصر و خاصیت های آن استفاده می کنیم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

مقادیر background-repeat به صورت repeat ،no-repeat، repeat-x و repeat-y تعریف می شود.

این بخش را با یک مثال کمی پیشرفته تر به پایان می بریم:

*محتوای این قسمت تنها برای اعضای انجمن قابل مشاهده می باشد. *

ورود
نام کاربری:
گذرواژه‌:	گذرواژه‌تان را فراموش کرده‌اید؟
	مرا به خاطر بسپار