background-color

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

به عنوان مثال نمونه زیر پس زمینه عنصر h1 را سیاه می کند:

 


h1 { 
  background-color: #000;
  color: white;
} 

 

اگر برای پس زمینه عنصر هم رنگ در نظر بگیریم و هم یک لایه تصویر از طریق ویژگی background-image داشته باشیم. رنگ پشت تصویر قرار خواهد گرفت.

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

دموی زیر را بررسی کنید:

 

See the Pen background-color by Mojtaba Seyedi (@seyedi) on CodePen.