این آموزش در تاریخ ۱۴۰۲/۰۶/۲۹ آپدیت شده است.
آموزش کار با پس زمینه ها یا Backgrounds در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با پس زمینه ها یا Backgrounds در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
کار با پس زمینه ها یا Backgrounds در CSS
در این جلسه از سری آموزش های قدم به قدم زبان CSS میخواهیم با پس زمینه ها یا Backgrounds در CSS کار کنیم ، در واقع از این ویژگی برای ایجاد پس زمینه ( تصویر یا رنگ ) برای یک تگ استفاده می شود.
ویژگی Background دارای حالت های مختلفی می باشد که این حالت به شرح زیر می باشد :
- background-color : رنگ زمینه
- background-image : تصویر زمینه
- background-repeat : تکرار تصویر زمینه
- background-attachment : نحوه قرار گیری تصویر زمینه
- background-position : موقعیت قرار گیری تصویر زمینه
Free-Learn
ویژگی background-color در CSS
در این روش ما میتونیم یک رنگ را برای پس زمینه یک عنصر تنظیم نماییم. مبحث قبلی در مورد رنگ ها در CSS بود و یاد گرفتیم که از چه روش هایی میشه یک رنگ را برای یک یا چندین تگ تنظیم نماییم.
شکل کلی برای تعریف یک رنگ برای پس زمینه در CSS بصورت زیر می باشد :
|
1 |
background-color: color_value ; |
مثال شماره ۱ : تنظیم رنگ زمینه کل صفحه ( تگ body )
|
1 2 3 4 5 6 7 |
<style> body{ background-color:#5db616; } </style> |
Free-Learn
ویژگی background-image در CSS
با استفاده از این ویژگی میتونیم برای یک تگ تصویر زمینه مشخص نماییم، که شکل کلی این ویژگی بصورت زیر می باشد :
|
1 |
background-image: url("Image_URL"); |
مثال شماره ۱ : تنظیم تصویر زمینه برای کل صفحه ( تگ body )
|
1 2 3 4 5 6 7 |
<style> body{ background-image:url("files/girls-2.png"); } </style> |
مثال شماره ۲ : تنظیم رنگ ترکیبی یا گرادینت یا Gradient
|
1 2 3 4 5 6 7 8 |
<style> div{ background-image:linear-gradient(to right,red,blue); height:70px; } </style> |
Free-Learn
ویژگی background-repeat در CSS
اگه به مثال قبلی ( بالایی ) توجه کرده باشید تصویرمون بصورت کاشی وار تکرار میشود، حال با استفاده از این ویژگی میتوانیم مشخص کنیم که آیا تصویر زمینه بصورت کاشی وار ( هم بصورت افقی و هم عمودی ) تکرار شود یا خیر!
مثال شماره ۱ : تصویر زمینه تکرار نشود
|
1 2 3 4 5 6 7 |
<style> body{ background-repeat:no-repeat; } </style> |
مثال شماره ۲ : تکرار فقط بصورت افقی
|
1 2 3 4 5 6 7 |
<style> body{ background-repeat:repeat-x; } </style> |
مثال شماره ۳ : تکرار فقط بصورت عمودی
|
1 2 3 4 5 6 7 |
<style> body{ background-repeat:repeat-y; } </style> |
Free-Learn
ویژگی background-attachment در CSS
با استفاده از این ویژگی میتوان نحوه قرار گیری تصویر زمینه را مشخص کرد، مثلا تصویر بصورت ثابت باشه یا بفرض مثال با اسکرول کردن صفحه تصویر هم اسکرول بشه.
نمونه : در حالت فیکس (Fixed) ثابت
سلام خوبی؟
مثال شماره ۱ : فیکس کردن تصویر زمینه
|
1 2 3 4 5 6 7 |
<style> body{ background-attachment:fixed; } </style> |
مثال شماره ۲ : در حالت اسکرول ( یعنی با اسکرول کردن صفحه تصویر هم اسکرول میشه )
|
1 2 3 4 5 6 7 |
<style> body{ background-attachment:scroll; } </style> |
Free-Learn
ویژگی background-position در CSS
با استفاده از این ویژگی نیز میتوان موقعیت قرار گیری تصویر زمینه را مشخص کرد. حتما آموزش ویژگی background-position در CSS را مشاهده نمایید.
مثال شماره ۱ : قرار دادن تصویر زمینه در وسط صفحه
|
1 2 3 |
body{ background-position:center; } |
مثال شماره ۲ : قرار دادن تصویر زمینه در سمت پایین گوشه راست صفحه
|
1 |
background-position:bottom right; |
Free-Learn
کوتاه نویسی ویژگی background
خب ما میتونیم بجای استفاده تک تک از ویژگی ها، همه ی ویژگی هارو در یک خط و بصورت کوتاه شده نوشته و استفاده کنیم.
ترتیب استفاده از ویژگی ها بصورت زیر می باشد :
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
|
1 |
background-color background-image background-repeat background-attachment background-position |
مثال :
|
1 2 3 4 5 6 7 8 |
<style> .MyBox{ background:#f2f2f2 url("files/girls-2.png") repeat-x fixed center; height:120px; } </style> |
