آموزش CSS – پس زمینه در CSS

  • منتشر شده در تاریخ

آموزش CSS

در جلسه قبل از آموزش CSS با خصوصیت رنگ در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه استفاده از خصوصیت پس زمینه در CSS را آموزش بدیم.

خصوصیت Background یا پس زمینه در CSS به منظور تعریف استایل پس زمینه برای المان( عناصر) مورد استفاده قرار می گیرد.

خصوصیت های پس زمینه در CSS :

زبان CSS خصوصیت های متعددی را برای سبک دهی پس زمینه یک المان همچون رنگ پس زمینه(background-color )، تصویر پس زمینه(background-image )، تکرار پس زمینه(background-repeat )؛ الحاقات پس زمینه(background-attachment ) و موقعیت پس زمینه(background-position) فراهم می آورد.

این بخش نحوه استفاده از این خصوصیت ها را برای  تنظیم سبک های مختلف پس زمینه توضیح می دهد.پس در ادامه همراه ما باشید.

رنگ پس زمینه – Background Color

خصوصیت رنگ پس زمینه(background-color) برای تنظیم رنگ یک المان مورد استفاده قرار می گیرد.

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

رنگ ها در زبان برنامه نویسی CSS اغلب به کمک روش های زیر مشخص می شوند:

  •   مقدار هگزا دسیمال همچون #ff0000
  •   مقدار RGB همچون rgb(255,0,0)
  •   نام رنگ دلخواه مانند Blue

در جلسه قبلی با خصوصیت رنگ در CSS و انواع آنها آشنا شدیم.

تصویر پس زمینه – Background Image

خصوصیت background-image  به شما کمک می کند یک تصویر را به عنوان پس زمینه المان HTML خود تنظیم کنید.

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

تکرار پس زمینه – Background Repeat

به طور پیش فرض، خصوصیت background-image  تصویر را هم به صورت عمودی و هم افقی تکرار می کند. اما اگر می خواهید این روند را تغییر دهید می توانید از خصوصیت background-repeat  استفاده کنید.

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

در چنین شرایطی می توانید تصویر پس زمینه را به صورت  عمودی( محور Y)، افقی( محور X)؛ در هر دو جهت تکرار نمایید.

مثال زیر نحوه تنظیم پس زمینه gradient برای یک صفحه از سایت را با تکرار تصویر برش خورده به صورت افقی نشان می دهد.

Background Attachment

خصوصیت Background Attachment تعیین می کند که آیا تصویر پس زمینه صرف نظر از سایر موارد ثابت بوده یا همراه با بقیه صفحه حرکت داشته باشد و جا به جا گردد. به مثال زیر توجه کنید:

موقعیت پس زمینه – Background Position

خصوصیت Background-position برای کنترل موقعیت تصویر پس زمینه مورد استفاده قرار می گیرد. اگر موقعیت تصویر مشخص نشود،تصویر به صورت پیش فرض در موقعیت بالا و سمت چپ المان نشان داده می شود.

مثال زیر را ببینید:

در مثال زیر، تصویر پس زمینه در گوشه سمت راست و بالا قرار دارد و موقعیت آن توسط خصوصیت background-position به خوبی مشخص شده است.

مختصر نویسی با خصوصیت Background

همانطور که تا به این جای کار مشاهده کردید، به هنگام کار با پس زمینه، خصوصیت های زیادی را می توانید مدنظر قرار دهید.

همچنین می توان همه این خصوصیت ها را در یک خصوصیت واحد مشخص کرد. معمولا چنین خصوصیتی برای کوتاه کردن کدها مورد استفاده قرار می گیرد.

به چنین خصوصیتی shorthand property ( خصوصیت مختصر نویسی) نیز می گویند.

خصوصیت background، خصوصیت مختصرنویسی برای تنظیم تمامی خصوصیت های پس زمینه فردی است.به مثال زیر توجه کنید:

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

زمانی که از خصوصیت background shorthand استفاده می کنید ترتیب مقادیر خصوصیت باید رعایت شود. این ترتیب به صورت زیر است:

اگر یکی از مقادیر خصوصیت پس زمینه مفقود بوده یا به کمک نماد مختصر نویسی مشخص نشده باشد، مقدار پیش فرض برای آن خصیصه مورد استفاده قرار خواهد گرفت.

نکته: خصوصیت های پس زمینه به ارث نمی رسند اما پس زمینه المان والد  به خاطر مقدار شفاف اولیه خصوصیت پس زمینه به صورت پیش فرض قابل مشاهده خواهد بود .

در جلسه ۱۷ دوره طراحی وب نت پارادیس بطور کامل و با مثال کاربردی, خصوصیت پس زمینه در CSS را آموزش دادیم.

 

امیدوارم در این بخش آموزش CSS, از خصوصیت پس زمینه در CSS نهایت استفاده را برده باشید.

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

حسن شفیعی علاقه خاصی به برنامه نویسی وب و موبایل دارم و هر روز تلاش می کنم به این حوزه مسلط تر شوم و اطلاعاتم را به شکل کاربردی برای علاقه مندان در وب به اشتراک بگذارم. توصیه من: هاست میهن وب‎هاست
مطالب زیر را حتما بخوانید
دیدگاه کاربران

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

دوره های آموزشی