سبد (0)

فرمت دهی پس زمینه در CSS

تغییر رنگ و تصویر پس زمینه در CSS

Wiki

خصوصیات مربوط به پس زمینه در CSS برای کار با پس زمینه یک عنصر استفاده می شوند.

این خصوصیات عبارتند از:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

رنگ پس زمینه

Wiki

خصوصیت background-color رنگ پس زمینه یک عنصر را مشخص می کند.

در مثال زیر رنگ پس زمینه در گزینشگر body تنظیم شده است:

مثال (فرمت دهی پس زمینه در CSS)

body {background-color:#b0c4de;}
خودتان امتحان کنید »

در CSS رنگ به یکی از روش های زیر مشخص می شود:

  • name: نام رنگ باید مشخص شود مانند "red"
  • RGB: به صورت RGB مشخص می شود مانند "(rgb(255,0,0"
  • Hex: به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

در مثال زیر رنگ های پس زمینه مختلف برای عناصر h1 و p و div تنظیم شده است:

مثال (فرمت دهی پس زمینه در CSS)

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}
خودتان امتحان کنید »

نمایش یک عکس در پس زمینه

Wiki

خصوصیت background-image یک عکس را به عنوان پس زمینه برای یک عنصر مشخص می کند.

به صورت پیش فرض عکس در محور X و Y تکرار می شود و تمام پس زمینه عنصر مورد نظر را می پوشاند.

در مثال زیر یک عکس به عنوان پس زمینه تنظیم شده است:

مثال (فرمت دهی پس زمینه در CSS)

body {background-image:url('paper.gif');}
خودتان امتحان کنید »

مثال زیر یک ترکیب نامناسب از پس زمینه و متن را نشان می دهد. متن تقریباً ناخواناست:

مثال (فرمت دهی پس زمینه در CSS)

body {background-image:url('bgdesert.jpg');}
خودتان امتحان کنید »

تکرار عکس در محور X و Y

Wiki

اگر تکرار عکس تنظیم نشود، به صورت پیشفرض عکس مورد نظر در دو محور X و Y تکرار خواهد شد.

بعضی مواقع یک عکس باید فقط در محور X و یا فقط در محور Y تکرار شود، در مثال زیر عکس به طور پیشفرض در دو محور X و Y تکرار شده است:

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('gradient2.png');
}
خودتان امتحان کنید »

اگر عکس مثال قبل، فقط در محور X تکرار شود، پس زمینه بهتری خواهیم داشت.

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('gradient2.png');
background-repeat:repeat-x;
}
خودتان امتحان کنید »

تنظیم مکان عکس پس زمینه

Wiki

توجه: زمانی که از عکس پس زمینه استفاده می کنید، توجه داشته باشید که عکس مورد نظر باعث ناخوانایی متن نشود.

در مثال زیر با تنظیم خصوصیت background-repeat با مقدار "no-repeat" عکس پس زمینه فقط یکبار نمایش داده می شود.

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
خودتان امتحان کنید »

در مثال بالا، عکس پس زمینه و متن در یک مکان قرار گرفته اند و این امر باعث ناخوانایی متن شده است.

مکان عکس پس زمینه یک عنصر، با خصوصیت background-position مشخص می شود:

مثال (فرمت دهی پس زمینه در CSS)

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}
خودتان امتحان کنید »

مختصر نویسی - پس زمینه

Wiki

همانطور که در مثال های بالا مشاهده کردید، برای تنظیم پس زمینه، با خصوصیات زیادی سروکار داریم.

برای کوتاه تر شدن کد، این امکان وجود دارد که همه خصوصیات مربوط به پس زمینه را در یک خصوصیت مشخص کنیم، این کار به اصطلاح مختصر نویسی نامیده می شود.

در CSS از خصوصیت "background" برای مختصر نویسی پس زمینه استفاده می شود:

مثال (فرمت دهی پس زمینه در CSS)

body {background:#ffffff url('img_tree.png') no-repeat right top;}
خودتان امتحان کنید »

ترتیب مقادیر باید به صورت زیر باشد:

  1. background-color
  2. background-image
  3. background-repeat
  4. background-attachment
  5. background-position

توجه: اهمیتی ندارد که یکی از مقادیر بالا ذکر نشود، تنها رعایت ترتیب مقادیر مهم است.


Examples

مثال - خودتان امتحان کنید

Wiki

چگونه عکس پس زمینه را ثابت کنیم
این مثال نشان خواهد داد که اگر صفحه Scroll داشت، حتی اگر به سمت پایین حرکت کردیم عکس پس زمینه در جای خود ثابت باشد.

مثال پیشرفته
در این مثال از CSS پیشرفته استفاده شده است، لطفاً نگاهی به آن بیندازید.


کلیه خصوصیات مربوط به پس زمینه

Wiki

خصوصیت توضیحات
background

کلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.

background-attachment

مکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه

background-color

رنگ پس زمینه یک عنصر را تنظیم می کند.

background-image

عکس پس زمینه یک عنصر را تنظیم می کند

background-position

مکان عکس پس زمینه یک عنصر را تنظیم می کند

background-repeat

چگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند


آموزش تصویری مطلب بالا (فیلم آموزش CSS)

 درس شماره 5 (فرمت دهی پس زمینه در CSS زمان فیلم:  46:09

  خرید و دانلود مستقیم فیلم آموزش CSS - حجم دانلود 1.12 گیگابایت (کلیک کنید +)

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه