ویژگی background-color در CSS

background-color CSS Property

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

نحوه نوشتار

background-color: blue;
background-color: transparent;
background-color: #ffffff;  
background-color: rgb(107, 142, 35);       
background-color: rgba(0, 0, 0, 0.5);
background-color: hsl(290, 67%, 58%);     
background-color: hsla(230, 66%, 49%, 0.3); 

مقادیر

رنگ​

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

html

<div class="color1">
      رنگ پس زمینه tomato است.
</div>
<div class="color2">
      رنگ پس زمینه rgb(107, 142, 35) است.
</div>
<div class="color3">
      رنگ پس زمینه rgba(0, 0, 0, 0.5) است.
</div>
<div class="color4">
      رنگ پس زمینه 4a7deb# است.
</div>
<div class="color5">
      رنگ پس زمینه hsl(290, 67%, 58%) است.
</div>

css

div {
    padding: 20px;
    text-align: center;
    font-family: "Segoe UI";
    direction: rtl;
    color: #ffffff;
}
.color1 {
    background-color: tomato;
}
.color2 {
    background-color: rgb(107, 142, 35);
}
.color3 {
    background-color: rgba(0, 0, 0, 0.5);
}
.color4 {
    background-color: #4a7deb;
}
.color5 {
    background-color: hsl(290, 67%, 58%);
}

مشاهده و ویرایش کد در حالت تمام صفحه

پشتیبانی مرورگرها
تمام مرورگرها از این ویژگی CSS پشتیبانی می کنند.