CSS - خلاصه پس‌زمینه (Background Shorthand)
در CSS، برای کوتاه کردن کد، می‌توان تمامی خصوصیات مربوط به پس‌زمینه را در یک خصوصیت خلاصه کرد. این روش را خصوصیت کوتاه (Shorthand) می‌نامند.
مثال بدون استفاده از Shorthand:
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}مثال با استفاده از Shorthand:
به جای نوشتن چندین خصوصیت، می‌توان همه را در یک خط به صورت خلاصه بیان کرد:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}ترتیب خصوصیات در Shorthand
هنگام استفاده از خصوصیت کوتاه background، ترتیب مقادیر به این شکل است:
- رنگ پس‌زمینه (background-color)
- تصویر پس‌زمینه (background-image)
- تکرار پس‌زمینه (background-repeat)
- پیوست پس‌زمینه (background-attachment)
- موقعیت پس‌زمینه (background-position)
نکته: اگر یک یا چند مقدار در این خلاصه‌سازی وجود نداشته باشد، به شرطی که بقیه به ترتیب صحیح باشند، مشکلی به وجود نخواهد آمد.
مثال:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}تمامی خصوصیات پس‌زمینه در CSS
| خصوصیت | توضیحات |
|---|
| background | تمامی خصوصیات پس‌زمینه را در یک اعلان تنظیم می‌کند |
| background-attachment | مشخص می‌کند که تصویر پس‌زمینه ثابت باشد یا اسکرول شود |
| background-clip | ناحیه رنگ‌آمیزی پس‌زمینه را مشخص می‌کند |
| background-color | رنگ پس‌زمینه عنصر را تنظیم می‌کند |
| background-image | تصویر پس‌زمینه را برای عنصر مشخص می‌کند |
| background-origin | محل قرارگیری تصویر پس‌زمینه را مشخص می‌کند |
| background-position | نقطه شروع تصویر پس‌زمینه را تنظیم می‌کند |
| background-repeat | مشخص می‌کند که تصویر پس‌زمینه چگونه تکرار شود |
| background-size | اندازه تصویر پس‌زمینه را تعیین می‌کند |
برای ارسال نظر لطفا ابتدا وارد حساب کاربری خود شوید. صفحه ورود و ثبت نام