رنگ زمینه در CSS – ویژگی background-color

ویژگی background-color در CSS برای تعیین رنگ پس زمینه المان های HTML به کار می‌رود. شما از این ویژگی می‌توانید برای هر نوع المانی در صفحات وب استفاده کنید.

نحوه تعیین رنگ پس زمینه المان ها در CSS

مقدار ویژگی background-color مشابه با سایر رنگ‌های ساده در CSS معمولا با نام رنگ، مقدار هگز یا مقدار RGB رنگ مشخص می‌شود. در مثال زیر نمونه‌ای از تعیین رنگ زمینه با کمک ویژگی background-color را برای هدینگ های سطح دوم (المان های <h2>) مشاهده می‌کنید:

h2 {
  background-color: blue;
}

در این مثال، مقدار ویژگی background-color با کمک نام رنگ (یعنی blue) مشخص شده است. به این ترتیب رنگ پس‌زمینه المان‌های <h2> داخل سند، آبی خواهد شد. در تصویر زیر نمایی از نتیجه قانون CSS فوق را روی یک المان <h2> فرضی مشاهده می‌کنید:

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

h2 {background-color: blue;}
h2 {background-color: #00f;}
h2 {background-color: #0000ff;}
h2 {background-color: rgb(0,0,255);}
h2 {background-color: rgb(0%, 0%, 100%);}

بیشتر بخوانید: فهرست کد و نام رنگ های رایج وب

چند نکته در مورد ویژگی background-color

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

بیشتر بخوانید: رنگ متن در CSS – ویژگی color

نکته دوم: مقدار ویژگی background-color صرفا می‌تواند یک رنگ ساده یا یکنواخت باشد. به عبارت بهتر این مقدار نمی‌تواند یک رنگ شیبدار یا Gradient را شامل شود.

نکته سوم: مقدار پیشفرض برای این ویژگی، transparent (شفاف یا بدون رنگ) می‌باشد.

نکته چهارم: مقدار رنگ زمینه (یا مقدار ویژگی background-color) را می‌توانید در ویژگی خلاصه background نیز مشخص کنید.

بازگشت به فهرست مجموعه آموزشی CSS