• ارسال کننده: سمیه مظفری
  • تاریخ انتشار: ۱۳۹۷ / ۰۷ / ۲۹

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

ویژگی رنگ پس زمینه:

اگر بخواهیم رنگ پس زمینه عنصری را مشخص کنیم از ویژگی background-color استفاده می کنیم. به عنوان مثال، به قطعه کد زیر که رنگ پس زمینه کل صفحه را تغییر داده است دقت کنید:

ویژگی background-color در css

همان طور که مشاهده می کنید برای تغییر رنگ کل صفحه، این خصوصیت را برای تگ  body نوشته ایم.

حال برای مقداردهی به background-color  اغلب به یکی از اشکال زیر عمل می کنیم. (فرض کنیم رنگ مورد نظر ما رنگ قرمز باشد):

  • نام رنگ مورد نظر را می نویسیم : red
  • از یک مقدار هگزادسیمال HEXاستفاده می کنیم : #ff0000
  • از یک مقدار RGB استفاده می کنیم : rgb(255,0,0)

در قطعه کد زیر مشاهده می کنید که برای هر یک از تگ های عنوان (<h1>)، <div>  و پاراگراف (<p>)، رنگ پس زمینه جداگانه ای را اعمال نموده ایم.

رنگ پس زمینه جداگانه ای در css

ویژگی Background Image

در قسمت قبل با نحوه تخصیص یک رنگ به پس زمینه یک عنصر آشنا شدید اما گاهی اوقات لازم است که به جای انتخاب یک رنگ برای پس زمینه، از یک تصویر استفاده کنیم. در این موارد باید از یکی دیگر از ویژگی های CSS تحت عنوان background-image  استفاده کنیم. حال اگر اندازه تصویر انتخابی، از ابعاد پس زمینه ما کوچکتر باشد به طور پیش فرض در صفحه تکرار می شود تا کل صفحه را بپوشاند.  به مثال زیر توجه کنید:

ویژگی Background Image در css

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

ترکیب بد تصویر پس زمینه با متن موجود در css

ویژگی background-repeat

در صورتیکه اندازه یک تصویر کوچکتر از ابعاد پس زمینه باشد به طور پیش فرض، ویژگی background-image، آن تصویر را در هر دو راستای افقی و عمودی آنقدر تکرار می کند تا کل صفحه را بپوشاند اما گاهی اوقات ما نیاز داریم که این تکرار، تنها در یک راستای افقی یا عمودی انجام شود و یا اینکه اصلا تصویر تکرار نشود و به جای آن، در کل صفحه کشیده شود. در اینجاست که ویژگی background-repeat به کمک ما می آید. مثلا در خروجی قطعه زیر می بینید که تصویر تواما در هر دو راستای افقی و عمودی تکرار شده:

ویژگی background-repeat در css

حال اگر بخواهیم تصویر ما تنها در راستای افقی تکرار شود باید از قطعه کد (background-repeat: repeat-x;)  استفاده کنیم.

تکرار تصویر تنها در راستای افقی در css

به طور مشابه برای تکرار عمودی یک تصویر هم باید به background-repeat مقدار repeat-y را بدهیم.

جلوگیری از تکرار پس زمینه و تنظیم موقعیت قرار گیری آن

برای جلوگیری از تکرار پس زمینه و نمایش یکباره آن هم می توانیم از ویژگی background-repeat استفاده کرده و مقدار آن را برابر no-repeat قرار دهیم.

جلوگیری از تکرار پس زمینه و تنظیم موقعیت قرار گیری آن در css

در تصویر فوق با اینکه مشکل تکرار پس زمینه را حل کردیم اما ملاحظه می کنید که تصویر پس زمینه ما با متن صفحه هم پوشانی دارد درنتیجه در میزان خوانایی متن اختلال ایجاد می کند. در نتیجه در چنین مواقعی می توانیم از ویژگی دیگری با نام background-position  استفاده کرده و مطابق مثال زیر، مکان پیش فرض شروع تصویر را تغییر دهیم.

background-position در css

تثبیت مکان تصویر پس زمینه

گاهی اوقات دوست نداریم که تصویر پس زمینه ما با اسکرول کردن باقی صفحه جابه جا شود بنابراین برای ثابت نگه داشتن آن، از ویژگی background-attachment استفاده می کنیم و مقدار آن را برابر fixed قرار می دهیم. به قطعه کد زیر توجه کنید:

ثابت نگه داشتن تصویر پس زمینه در css

بعد از اینکه با تک تک ویژگی های مدیریت پس زمینه در css، آشنا شدید و طریقه استفاده از آنها را یادگرفتید، می توانید تمامی این ویژگی ها را با هم ادغام کرده و در یک خط بنویسید. ویژگی background ، نمونه ای از shorthand property یا خاصیت مختصرنویسی موجود در css است که تمامی خصوصیت های مربوط به پس زمینه (background property) را در یک خط تعریف و مقداردهی می کند.

خاصیت مختصرنویسی موجود در css

اما باید توجه داشته باشید که وقتی از چنین سبکی (shorthand property) استفاده می کنید ترتیب و اولویت property  ها را به صورت زیر رعایت کنید.

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

تا زمانی که ترتیب را به صورت بالا حفظ کنید اگر یکی از موارد بالا را هم ننویسید مشکلی ایجاد نمی شود.

با استفاده از این ویژگی می توانید از حجم کد css خود کاسته و درنتیجه بر سرعت بارگذاری صفحاتتان بیفزایید.

ترجمه: رقیه آقایاری

 

به این مطلب رای دهید



 

به اشتراک بگذارید :       فیس بوک کلوب

 

برچسب ها:
این مقاله اختصاصاً برای یاد بگیر دات کام تهیه شده است استفاده از آن با ذکر منبع همراه با لینک آن و نام نویسنده یا مترجم مجاز است

 

در یاد بگیر دات کام مشترک شوید و آخرین مطالب و مقالات را در ایمیل خود دریافت نمایید
برای عضویت، ایمیل خود را وارد کرده و بروی اشتراک کلیک کنید

نظر شما چیست؟

پرسش های خود را در بخش پرسش و پاسخ مطرح کنید

*

code



تبلیغات اینترنتی در یاد بگیر دات کام

بسته های تبلیغاتی ارزان قیمت

 
بستن تبلیغات

Useful Websites Directory

طراحی سایت
تور کوش آداسی
وقت سفارت انگلیس
ویزای تحصیلی کانادا



صفحه ما را در فیس بوک دنبال کنید صفحه ما را در توییتر دنبال کنید صفحه ما را در گوگل پلاس دنبال کنید صفحه ما را در  تلگرام دنبال کنید صفحه ما را در  اینستاگرام دنبال کنید صفحه ما را در لینکداین دنبال کنید