برای کوتاهتر کردن کد، میتوان تمام ویژگیهای مربوط به پسزمینه را بهصورت یکجا و در قالب یک ویژگی واحد تعریف کرد. این روش در CSS بهعنوان ویژگی خلاصهشده (shorthand property) شناخته میشود.
body {
background-color: #ffffff;
background-image: url("img_tree.png");
background-repeat: no-repeat;
background-position: right top;
}
backgroundبا استفاده از ویژگی background میتوان تمام ویژگیهای بالا را در یک خط نوشت:
body {
background: #ffffff url("img_tree.png") no-repeat right top;
}
هنگام استفاده از ویژگی background، ترتیب مقادیر باید بهصورت زیر باشد:
background-color (رنگ پسزمینه)background-image (تصویر پسزمینه)background-position (موقعیت تصویر)background-size (اندازه تصویر)background-repeat (نحوه تکرار تصویر)background-origin (مبدا موقعیت تصویر)background-clip (ناحیهای که تصویر در آن رسم میشود)background-attachment (ثابت یا متحرک بودن تصویر)نکته: اگر برخی از مقادیر را مشخص نکنید، مشکلی پیش نمیآید؛ فقط کافیست مقادیر موجود را به ترتیب بالا قرار دهید.
| ویژگی | توضیح |
|---|---|
background | تمام ویژگیهای پسزمینه را در یک اعلان واحد تنظیم میکند |
background-attachment | مشخص میکند که تصویر پسزمینه ثابت باشد یا همراه با صفحه اسکرول شود |
background-clip | ناحیهای را مشخص میکند که تصویر پسزمینه در آن رسم میشود |
background-color | رنگ پسزمینه یک عنصر را تنظیم میکند |
background-image | تصویری را بهعنوان پسزمینه عنصر تنظیم میکند |
background-origin | محل شروع موقعیت تصویر پسزمینه را مشخص میکند |
background-position | محل قرارگیری تصویر پسزمینه را تعیین میکند |
background-repeat | نحوه تکرار تصویر پسزمینه را مشخص میکند |
background-size | اندازه تصویر پسزمینه را مشخص میکند |
این محتوا کاملا رایگان توسط تیم کدلپر ترجمه شده و در اختیار شما کاربران عزیز قرار گرفته است، هر گونه کپی برداری برای مقاصد غیر رایگان و بدون ذکر منبع، مورد پیگیری قانونی قرار میگیرد.
ترجمه شده از منبع: https://www.w3schools.com/css/