ویژگی background-color در CSS

با ویژگی background-color در CSS، رنگ پس زمینه ی المان را مشخص می کنیم.

background-color: red;

 برای مقداردهی به ویژگی background-color، همانطور که در رنگ ها در CSS بررسی کردیم، چهار روش وجود دارد:

  • اسامی قابل درک مانند red , blue و ...
  • RGB
  • HEX
  • HSL
background-color: #f00;
background-color: rgb(0, 255, 0);
background-color: hsl(0, 100%, 50%);

ویژگی opacity در CSS

با ویژگی opacity، می توان میزان شفافیت رنگ ها را مشخص کرد.

background-color: rgb(0, 255, 0);
opacity: 0.4;

نکته: با کمک کانال آلفا نیز می توان شفافیت یک رنگ را تعیین کرد.

background-color: rgba(0, 255, 0, 0.4);

نکته: با مشاهده دو نمونه کد بالا، متوجه این می شویم که ویژگی opacity کل المان (حتی متن ها) را شفاف می کند. ولی کانال آلفا صرفا رنگ را شفاف می کند.

خلاصه درس

در این درس با ویژگی background-color در CSS و مقادیر آن:

  • نام رنگ
  • RGB
  • HEX
  • HSL

آشنا شدیم.

  • همچنین به ویژگی شفافیت (opacity) پی بردیم.

توسعه دهندگان
احسان اسلامی