فرمت دهی پس زمینه در CSS
تغییر رنگ و تصویر پس زمینه در CSS
خصوصیات مربوط به پس زمینه در CSS برای کار با پس زمینه یک عنصر استفاده می شوند.
این خصوصیات عبارتند از:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
رنگ پس زمینه
خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.
در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:
در CSS رنگ به یکی از روش های زیر مشخص می شود:
- name: نام رنگ باید مشخص شود مانند "red"
- RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
- Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #
در مثال زیر رنگ های پس زمینه مختلف برای عناصر h1 و p و div تنظیم شده است:
مثال (فرمت دهی پس زمینه در CSS)
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
نمایش یک عکس در پس زمینه
خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.
به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.
در مثال زیر یک عکس به عنوان پس زمینه تنظیم شده است:
مثال زیر یک ترکیب نامناسب از پس زمینه و متن را نشان می دهد. متن تقریباً ناخواناست:
تکرار عکس در محور X و Y
اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.
بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:
اگر عکس مثال قبل، فقط در محور X تکرار شود، پس زمینه بهتری خواهیم داشت.
مثال (فرمت دهی پس زمینه در CSS)
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
تنظیم مکان عکس پس زمینه
توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.
در مثال زیر با تنظیم خصوصیت background-repeat با مقدار "no-repeat" عکس پس زمینه فقط یکبار نمایش داده می شود.
مثال (فرمت دهی پس زمینه در CSS)
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
در مثال بالا، عکس پس زمینه و متن در یک مکان قرار گرفته اند و این امر باعث ناخوانایی متن شده است.
مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود:
مثال (فرمت دهی پس زمینه در CSS)
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
مختصر نویسی - پس زمینه
همانطور که در مثال های بالا مشاهده کردید، برای تنظیم پس زمینه، با خصوصیات زیادی سروکار داریم.
برای کوتاه تر شدن کد، این امکان وجود دارد که همه خصوصیات مربوط به پس زمینه را در یک خصوصیت مشخص کنیم، این کار به اصطلاح مختصر نویسی نامیده می شود.
در CSS از خصوصیت "background" برای مختصر نویسی پس زمینه استفاده می شود:
مثال (فرمت دهی پس زمینه در CSS)
ترتیب مقادیر باید به صورت زیر باشد:
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.
مثال - خودتان امتحان کنید
چگونه عکس پس زمینه را ثابت کنیم
این مثال نشان خواهد داد که اگر صفحه Scroll داشت، حتی اگر به سمت پایین حرکت کردیم عکس پس زمینه در جای خود ثابت باشد.
مثال پیشرفته
در این مثال از CSS پیشرفته استفاده شده است، لطفاً نگاهی به آن بیندازید.
کلیه خصوصیات مربوط به پس زمینه
خصوصیت | توضیحات |
---|---|
background |
کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند. |
background-attachment |
مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه |
background-color |
رنگ پس زمینه یک عنصر را تنظیم می کند. |
background-image |
عکس پس زمینه یک عنصر را تنظیم می کند |
background-position |
مکان عکس پس زمینه یک عنصر را تنظیم می کند |
background-repeat |
چگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند |
آموزش تصویری مطلب بالا (فیلم آموزش CSS) |
---|
درس شماره 5 (فرمت دهی پس زمینه در CSS) زمان فیلم: 46:09 |
خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +) |
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 53695