در جلسه قبل از آموزش CSS با خصوصیت رنگ در CSS آشنا شدید. در این بخش قصد داریم شما را با نحوه استفاده از خصوصیت پس زمینه در CSS را آموزش بدیم.
خصوصیت Background یا پس زمینه در CSS به منظور تعریف استایل پس زمینه برای المان( عناصر) مورد استفاده قرار می گیرد.
خصوصیت های پس زمینه در CSS :
زبان CSS خصوصیت های متعددی را برای سبک دهی پس زمینه یک المان همچون رنگ پس زمینه(background-color )، تصویر پس زمینه(background-image )، تکرار پس زمینه(background-repeat )؛ الحاقات پس زمینه(background-attachment ) و موقعیت پس زمینه(background-position) فراهم می آورد.
این بخش نحوه استفاده از این خصوصیت ها را برای تنظیم سبک های مختلف پس زمینه توضیح می دهد.پس در ادامه همراه ما باشید.
رنگ پس زمینه – Background Color
خصوصیت رنگ پس زمینه(background-color) برای تنظیم رنگ یک المان مورد استفاده قرار می گیرد.
مثال زیر را به دقت مطالعه کنید. همانطور که در مثال زیر مشاهده می کنید، می توانید به کمک این خصوصیت رنگ پس زمینه را برای یک صفحه از سایت تنظیم کنید.
|
1 2 3 |
body { background-color: #f0e68c; } |
رنگ ها در زبان برنامه نویسی CSS اغلب به کمک روش های زیر مشخص می شوند:
- مقدار هگزا دسیمال همچون
#ff0000 - مقدار RGB همچون
rgb(255,0,0) - نام رنگ دلخواه مانند
Blue
در جلسه قبلی با خصوصیت رنگ در CSS و انواع آنها آشنا شدیم.
تصویر پس زمینه – Background Image
خصوصیت background-image به شما کمک می کند یک تصویر را به عنوان پس زمینه المان HTML خود تنظیم کنید.
به مثال زیر توجه کنید. این مثال نحوه تنظیم تصویر به عنوان پس زمینه یک صفحه را نشان می دهد:
|
1 2 3 |
body { background-image: url("leaf.jpg"); } |
تکرار پس زمینه – Background Repeat
به طور پیش فرض، خصوصیت background-image تصویر را هم به صورت عمودی و هم افقی تکرار می کند. اما اگر می خواهید این روند را تغییر دهید می توانید از خصوصیت background-repeat استفاده کنید.
این خصوصیت به شما کمک می کند کنترل بیشتری بر روی نحوه تکرار تصویر پس زمینه داشته باشید.
در چنین شرایطی می توانید تصویر پس زمینه را به صورت عمودی( محور Y)، افقی( محور X)؛ در هر دو جهت تکرار نمایید.
مثال زیر نحوه تنظیم پس زمینه gradient برای یک صفحه از سایت را با تکرار تصویر برش خورده به صورت افقی نشان می دهد.
|
1 2 3 4 |
body { background-image: url("gradient.png"); background-repeat: repeat-x; } |
Background Attachment
خصوصیت Background Attachment تعیین می کند که آیا تصویر پس زمینه صرف نظر از سایر موارد ثابت بوده یا همراه با بقیه صفحه حرکت داشته باشد و جا به جا گردد. به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 |
body { width: 250px; height: 200px; overflow: scroll; background-image: url("recycle.jpg"); background-attachment: fixed; } |
موقعیت پس زمینه – Background Position
خصوصیت Background-position برای کنترل موقعیت تصویر پس زمینه مورد استفاده قرار می گیرد. اگر موقعیت تصویر مشخص نشود،تصویر به صورت پیش فرض در موقعیت بالا و سمت چپ المان نشان داده می شود.
مثال زیر را ببینید:
|
1 2 3 4 |
body { background-image: url("tree.png"); background-repeat: no-repeat; } |
در مثال زیر، تصویر پس زمینه در گوشه سمت راست و بالا قرار دارد و موقعیت آن توسط خصوصیت background-position به خوبی مشخص شده است.
|
1 2 3 4 5 |
body { background-image: url("tree.png"); background-repeat: no-repeat; background-position: 100% top; } |
مختصر نویسی با خصوصیت Background
همانطور که تا به این جای کار مشاهده کردید، به هنگام کار با پس زمینه، خصوصیت های زیادی را می توانید مدنظر قرار دهید.
همچنین می توان همه این خصوصیت ها را در یک خصوصیت واحد مشخص کرد. معمولا چنین خصوصیتی برای کوتاه کردن کدها مورد استفاده قرار می گیرد.
به چنین خصوصیتی shorthand property ( خصوصیت مختصر نویسی) نیز می گویند.
خصوصیت background، خصوصیت مختصرنویسی برای تنظیم تمامی خصوصیت های پس زمینه فردی است.به مثال زیر توجه کنید:
|
1 2 3 4 5 6 7 |
body { background-color: #f0e68c; background-image: url("smiley.png"); background-repeat: no-repeat; background-attachment: fixed; background-position: 250px 25px; } |
به کمک نماد مختصرنویسی، مثال بالا به شکل زیر نوشته می شود.
|
1 2 3 |
body { background: #f0e68c url("smiley.png") no-repeat fixed 250px 25px; } |
زمانی که از خصوصیت background shorthand استفاده می کنید ترتیب مقادیر خصوصیت باید رعایت شود. این ترتیب به صورت زیر است:
|
1 |
background: color image repeat attachment position; |
اگر یکی از مقادیر خصوصیت پس زمینه مفقود بوده یا به کمک نماد مختصر نویسی مشخص نشده باشد، مقدار پیش فرض برای آن خصیصه مورد استفاده قرار خواهد گرفت.
نکته: خصوصیت های پس زمینه به ارث نمی رسند اما پس زمینه المان والد به خاطر مقدار شفاف اولیه خصوصیت پس زمینه به صورت پیش فرض قابل مشاهده خواهد بود .
در جلسه ۱۷ دوره طراحی وب نت پارادیس بطور کامل و با مثال کاربردی, خصوصیت پس زمینه در CSS را آموزش دادیم.
امیدوارم در این بخش آموزش CSS, از خصوصیت پس زمینه در CSS نهایت استفاده را برده باشید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید.
