CSSطراحی سایتگوناگون

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

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

 

خصوصیات مربوط به پس زمینه در CSS عبارتند از:

 

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


 

رنگ پس زمینه

 

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

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

 

  • نتیجه ی قطعه کد بالا بدین شکل است:

 

  • ملاحظه میکنید که رنگ پس زمینه را با کمک خصوصیت background-color تغییر دادیم.

 


 

روش تعیین رنگ در CSS

 

  • name:نام رنگ ذکر میشود.مانند “blue”
  • RGB:به صورت RGB مشخص می شود مانند “(rgb(240,0,0”
  • HEX:به صورت هگزا دسیمال مشخص می شود مانند ff0000 #

 

 

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

 

  • نتیجه قطعه کد بالا به شکل زیر است:

 

 

 


 

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

 

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

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

 

مثال

 

  • تصویر قطعه کد بالا به شکل زیر است:

 

  • تذکر: سعی کنید همواره از رنگ یا تصویری برای پس زمینه خود استفاده کنید که متن روی آن خوانا و همچنین واضح باشد!

 


 

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

 

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

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

 

  • نتیجه قطعه کد بالا به شکل زیر است:

  • در قطعه کد بالا اگر از کد زیر استفاده میکردیم عکس فقط در محور x تکرار میشد ونمای زیباتری به خود میگرفت:

 

 


 

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

 

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

 

  • نتیجه قطعه کد بالا به شکل زیر است:

 

 


 

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

 

  • نتیجه قطعه کد بالا به شکل زیر است:

 

 


 

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

 

نکته: میتوان در یک خط به شکل زیر قطعه کد را مختصر نویسی کرد:

 

 

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

 

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

 

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

 


 

مثال های بیشتر

 

۱-ثابت کردن عکس پس زمینه       کلیک کنید

۲-مثال پیشرفته              کلیک کنید

 

 


 

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

 

 

خصوصیتتوضیحات 
backgroundکلیه خصوصیات مربوط به پس زمینه را در یک مرحله تنظیم می کند.
background-attachmentمکان عکس پس زمینه با Scroll خوردن صفحه حفظ شود یا نه
background-colorرنگ پس زمینه یک عنصر را تنظیم می کند.
background-imageعکس پس زمینه یک عنصر را تنظیم می کند
background-positionمکان عکس پس زمینه یک عنصر را تنظیم می کند
background-repeatچگونگی تکرار عکس پس زمینه یک عنصر را تنظیم می کند

 

 


برای مشاهده آموزش های بیشتر در مورد پس زمینه CSS  کلیک کنید:            کلیک کنید

 

 


بخش بعدی

بخش قبلی

به این پست امتیاز دهید.
برچسب ها
مشاهده بیشتر

رضااسدزاده

رضااسدزاده هستم مهندس نرم افزار علاقه مند به فضای وب از تاریخ 12شهریور سال96 سایت تیچ وب رو راه اندازی کردیم با هدف گسترش اطلاعات نرم افزاری و زبان های برنامه نویسی . امیدوارم با حمایت شما دوستان بتونیم به این هدف بزرگ دست پیدا کنیم.

نوشته های مشابه

2 دیدگاه

    1. خیلی ممنون از شما دوست عزیز
      دقت داشته باشید سایت تازه راه افتاده ما هم در اول مسیر هستیم اما قطعا به زودی ویدیو اموزشی هم اضافه میکنیم به سایت
      ممنون از صبر وحمایت شما

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

بستن